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部分

完整代码预览






你可能感兴趣的:(uniapp,uni-app)