（IPO）写入数据const怎么行，赶紧搞定它！

数据输入

每个小程序都有自己的本地缓存，同一微信用户、同一小程序的存储限制为10MB。 用户A无法读取用户B的数据，不同小程序之间也无法互相读写数据，您的数据安全尽可放心。

但缓存并不是很可靠，在以下情况下会被系统清除：

因此，重要数据和过大的数据不适合放在本地缓存中。

大量的数据更适合以文件系统的形式存储。

但对于这个项目来说，本地缓存还是比较合适的。

将数据写入缓存非常简单。 只需调用接口函数wx. 当待办事项列表中发生任何更改时。

在逻辑层相应方法中添加代码：

// pages/index/index.js
Component({
  data: {
    // ...
  },
  methods: {
    inputSubmit() {
      // ...已有代码
      // 新代码
      // 将items存储到缓存
      wx.setStorage({
        key: "items",
        data: items,
      })
    },
    checkboxChange(e) {
      // ...已有代码
      // 新代码
      // 将items本地存储
      wx.setStorage({
        key: "items",
        data: items,
      })
    }
  },
})

wx。 是小程序内置的通用接口。 它有很多重要的功能，比如读写缓存，还有发送网络请求、路由、用户登录等能力。wx.()是写缓存的接口，key和data是key和value分别要写入的数据。

缓存仅支持本机类型、Date 和可通过 JSON 序列化的对象。

需要注意的是，小程序中的很多接口都提供了同步和异步两种版本。 这里的.()实际上是一个异步函数。 同步版本通常在函数名末尾添加Sync一词，如.、.等。

读取数据

作为积压工作，我们希望它在启动时自动从缓存加载数据。 恰好构造函数提供了现成的生命周期函数。

在逻辑层添加生命周期函数()。 该函数会在小程序启动时自动执行：

// pages/index/index.js
Component({
  data: {
    // ...已有代码
  },
  // 新代码
  // 生命周期函数“们”
  lifetimes: {
    // 在组件实例进入页面节点树时执行
    attached() {
      // 从缓存中读取items
      const that = this;
      wx.getStorage({
        key: 'items',
        success(res) {
          that.setData({
            items: res.data
          })
        },
      })
    },
  },
  methods: {
    // ...已有代码
  },
})

另外，上面代码中的const that = this是什么意思？ 为什么不直接使用这个呢？ 这里面涉及到反直觉的指向问题，需要一篇很长的文章才能讲清楚。 我们不会在这里讨论那些令人困惑的理论。 只需记住一件事：在嵌套函数和闭包中，this 的指针可能会发生变化，因此在使用它之前，请使用 const that = this 来设置当前作用域。 方法对象可以预先绑定到该方法对象。

当然你也可以使用箭头函数来避免这个问题。 将wx.()中的代码修改为：

wx.getStorage({
  key: 'items',
  success: res => {
    this.setData({
      items: res.data
    })
  },
})

只要摆脱那个烦人的事情就可以了。

干净的数据

如果你仔细想一想，我们定义了添加新条目的方法，但是没有删除它们的方法。 那岂不是意味着随着时间的推移，这个名单会越来越大，这是肯定不可能的。

再想一想，似乎没有必要手动删除条目，只要在每次启动程序时过滤掉未完成的条目即可。

完成的物品自然会被丢弃。

既然我们上面讲了ES6的箭头函数，那么我们再使用一下ES6中的新特性。 修改()函数如下：

attached() {
  wx.getStorage({
    key: 'items',
    success: res => {
      this.setData({
        // 只改了这一行
        items: res.data.filter(v=>v.checked===false)
      })
    },
  })
},

数组的 .() 方法将返回一个新数组，其元素全部来自原数组并满足 .===false 条件。 也就是说，已完成的条目将被过滤掉。

就是这样。 让我们输入一些条目进行测试：

重新进入小程序后，不再显示“老王”的完整条目：

未完成的条目将从缓存中恢复。 尝试添加其他条目，它应该按预期存储在缓存中，这是完美的。

小程序 vs. Vue

如果你学过Vue，你可能会觉得：小程序看起来不是和Vue一模一样吗？

它们确实很相似，但还是有区别的，比如：

造成这些差异的根本原因是小程序的逻辑层和视图层分散在两个不同的上下文中。 数据对象在两层之间不共享，同步通信的成本很高。 因此，微信采取了这种折中的做法。 计划。 Vue不存在类似的问题，所以直观上数据绑定更加彻底。

逻辑层和视图层分散在不同的上下文中。 由此带来的另一个特点是，小程序中很多内置接口都是异步的。 开发的时候要小心，不确定的话就跟官方文档确认一下。

总结

我们使用很少的、易于理解的代码来创建一个高度完整的演示。 我们希望您能体验到开发小程序的乐趣。

但教程还没有结束。 下一集预告：开发小程序+网页版待办事项列表。

点赞还是评论？ 快来博客或者评论区吧！

TAG标签：微信小程序缓存