本地数据缓存——微信小程序学习笔记

本地数据缓存是小程序存储在当前设备上硬盘上的数据，本地数据缓存有非常多的用途，我们可以利用本地数据缓存来存储用户在小程序上产生的操作，在用户关闭小程序重新打开时可以恢复之前的状态。我们还可以利用本地缓存一些服务端非实时的数据提高小程序获取数据的速度，在特定的场景下可以提高页面的渲染速度，减少用户的等待时间。

1. 介绍

1.1 基本信息介绍

• 方式：以键值对（key, data）的形式存储数据，可以使用wx.setStorage（异步）、wx.setStorageSync（同步）方法进行数据存储，使用wx.getStorage（异步）、wx.getStorageSync（同步）方法进行数据获取。
• 限制：单个key允许存储的最大数据长度为1MB，所有数据存储空间最大为10MB（以微信官方最新文档为准），如果超过了10M再往缓存里面写入，就会触发 fail 的回调。
• 隔离策略：storage以用户维度隔离，同一台设备上，A用户无法读取到B用户的数据；不同小程序之间也无法互相读写数据。
• 使用场景：适用于存储用户偏好设置（如主题颜色、通知开关等）、离线缓存（如文章内容、商品信息等）以及临时数据存储（如表单填写过程中的草稿信息）。

除了上面介绍到的获取和设置本地数据，常用还有：

• wx.removeStorage：从本地缓存中移除指定 key。
• wx.removeStorageSync：上面方法的同步版本
• wx.clearStorage：清空整个本地存储
• wx.clearStorageSync：上面方法的同步版本

1.2 数据加密 

从 2.21.3 版本开始，往本地存储写入数据时，可以进行一个加密的操作，只需要配置 encrypt 为 true 即可。

但是有一些注意事项：

只有异步的存储支持加密（因为加密的时候，回调耗时会增加，所以只能采用异步的方式）
如果进行了加密存储，在获取数据的时候，同样需要将 encrypt 设置为 true 进行解密
因为加密后字符串的长度会膨胀，所以每个 key 最大存储的长度变为了 0.7MB，最大的存储上线由之前的 10MB变为了 7.1MB

2. 示例介绍

2.1  同步存储

2.1.1 写入

wx.setStorageSync('accountData', this.data.accountData);

2.1.2 读取

        try{
            let value = wx.getStorageSync('accountData')
            if(value)
            {
                // Do something with return value
            }
        }catch(e){
            // Do something when catch error
        }

2.1.3 移除'key'

try {
  wx.removeStorageSync('key')
} catch (e) {
  // Do something when catch error
}

 2.1.4 移除所有

try {
  wx.clearStorageSync()
} catch(e) {
  // Do something when catch error
}

2.2  异步存储

2.2.1 写入

        wx.setStorage({
            key:'accountData',
            data:this.data.accountData,
            success:(res)=>{
                console.log("存储成功")
                console.log(res.errMsg)
            },
            fail:(err)=>{
                console.log("存储失败")
                console.log(err.errMsg)
            }
        })

 

2.2.2 读取

        wx.getStorage({
            key:'accountData',
            success:(res)=>{
                console.log(res.data)
            },
            fail:(err)=>{
                console.log(res.errMsg)
            }
        })

2.2.3 移除'key'

wx.removeStorage({
  key: 'key',
  success (res) {
    console.log(res)
  }
})

2.2.4  移除所有

wx.clearStorage()

 2.2.5  加密存储

// 开启加密存储
wx.setStorage({
  key: "key",
  data: "value",
  encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
  success() {
    wx.getStorage({
      key: "key",
      encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
      success(res) {
        console.log(res.data)
      }
    })
  }
})

3. 参考

使用场景可参考教程 | 《小程序开发指南》