比如你想要存储信息最大限度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); },
str(s)方法：
- 这是一个自定义的方法，当你调用它时，需要传入一个参数
s，代表要存储的数据。 - 在方法内部，它首先检查
this.storedData数组的长度是否已经达到了5个数据项，因为你希望最多存储5个数据。 - 如果数组长度超过5个，它使用
this.storedData.shift()来删除数组的第一个元素，这样可以确保数组保持在5个数据项以内。 - 接下来，它将参数
s添加到this.storedData数组中，以便将新数据存储在数组中。 - 最后，它使用
uni.setStorageSync方法将更新后的数组存储在本地存储中，使用 'storedDataKey' 作为存储的键名。
mounted() { // 在页面加载时，从本地存储中获取数据 this.storedData = uni.getStorageSync('storedDataKey') || []; },
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>
