uniapp数据点击的时候将数据存入同一个本地存储中并且最大限度5个

比如你想要存储信息最大限度5个，当然也可以存入更多，更改一下设置即可

让他this.storedData.length >= 数值即可

data部分

  data() {
    return {
      storedData: [], // 用于存储点击获取的数据
      list: [
        { name: '张三', id: 1 },
        { name: '李四', id: 2 },
        { name: '王五', id: 3 },
        { name: '阡陌', id: 4 },
        { name: '啄木鸟', id: 5 },
      ],
    };
  },

js部分

    str(s) {
      if (this.storedData.length >= 5) {
        // 如果数组长度超过5个数据，删除最早添加的数据
        this.storedData.shift();
      }
      // 将数据添加到数组中
      this.storedData.push(s);
      
      // 更新本地存储的数据
      uni.setStorageSync('storedDataKey', this.storedData);
    },

1. str(s) 方法：

   • 这是一个自定义的方法，当你调用它时，需要传入一个参数 s，代表要存储的数据。
   • 在方法内部，它首先检查 this.storedData 数组的长度是否已经达到了5个数据项，因为你希望最多存储5个数据。
   • 如果数组长度超过5个，它使用 this.storedData.shift() 来删除数组的第一个元素，这样可以确保数组保持在5个数据项以内。
   • 接下来，它将参数 s 添加到 this.storedData 数组中，以便将新数据存储在数组中。
   • 最后，它使用 uni.setStorageSync 方法将更新后的数组存储在本地存储中，使用 'storedDataKey' 作为存储的键名。

  mounted() {
    // 在页面加载时，从本地存储中获取数据
    this.storedData = uni.getStorageSync('storedDataKey') || [];
  },

1. mounted() 钩子：

   • 这是 Vue 生命周期中的一个钩子，在页面加载时自动调用。
   • 在 mounted 钩子中，它使用 uni.getStorageSync 方法尝试从本地存储中获取之前存储的数据，通过 'storedDataKey' 键名。
   • 如果之前没有存储数据，它会初始化 this.storedData 为一个空数组 []。

这段代码的目的是，每次调用 str(s) 方法时，将数据添加到 this.storedData 数组中，限制数组长度最多为5个，然后将更新后的数组存储在本地存储中。在页面加载时，从本地存储中获取已存储的数据，以便在页面重新加载后恢复之前的数据状态。这是一种基本的本地数据管理模式，用于存储有限数量的数据并在应用重新启动后保持数据状态。

html部分

<template>
  <view>
    <view class="">
      点击下方获取数据存储
    </view>
    <view class="" style="font-size: 40rpx;" v-for="(item, index) in list" :key="index" @click="str(item)">
      {{ item.name }}
    </view>
	<!-- 存储预览 -->
	<view class="">
		<view class="">
			存储的数据
		</view>
		<view class="" v-for="(item, index) in storedData" :key="index" >
			{{item.name}}
		</view>
	</view>
  </view>
</template>

完整代码预览

<template>
  <view>
    <view class="">
      点击获取数据存储
    </view>
    <view class="" style="font-size: 40rpx;" v-for="(item, index) in list" :key="index" @click="str(item)">
      {{ item.name }}
    </view>
	<!-- 存储的数据 -->
	<view class="">
		<view class="">
			存储的数据
		</view>
		<view class="" v-for="(item, index) in storedData" :key="index" >
			{{item.name}}
		</view>
	</view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      storedData: [], // 用于存储点击获取的数据
      list: [
        { name: '张三', id: 1 },
        { name: '李四', id: 2 },
        { name: '王五', id: 3 },
        { name: '阡陌', id: 4 },
        { name: '啄木鸟', id: 5 },
      ],
    };
  },
  methods: {
    str(s) {
      if (this.storedData.length >= 5) {
        // 如果数组长度超过5个数据，删除最早添加的数据
        this.storedData.shift();
      }
      // 将数据添加到数组中
      this.storedData.push(s);
      
      // 更新本地存储的数据
      uni.setStorageSync('storedDataKey', this.storedData);
    },
  },
  mounted() {
    // 在页面加载时，从本地存储中获取数据
    this.storedData = uni.getStorageSync('storedDataKey') || [];
  },
};
</script>
 
<style>
 
</style>