【微信小程序3】本地缓存：一次性存储多个对象值

一、缓存介绍

每个微信小程序都有自己的本地缓存。同一个微信用户，同一个小程序 storage 上限为 10MB。localStorage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据。

可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。

二、 （异步）和（同步）的区别：

wx.setStorage(object)是一个异步接口，参数object包含key和data（需要存储的内容），他有3个回调函数：success（接口调用成功的回调函数）、fail（接口调用失败的回调函数）、complete（接口调用结束的回调函数，调用成功、失败都会执行）。我们可以通过3个回调函数进一步优化一功能。

wx.setStorageSync(key，data)是一个同步接口，需要接受key和data（String/Object）2个参数，他没有上述三个回调函数。

在开发中根据业务和环境选取需要的方法，一般都使用同步，异步是为了用户体验的情况而选择，同步相对简单。

三、在哪个生命周期可以调用缓存：

页面的onShow生命周期基本在每次打开页面都会触发，所以在onShow里调用更保险，当然了，如果熟悉路由切换到下一个页面时触发哪个生命周期，也可以在onLoad里面调用，提升用户体验。

四、案例展示

问题描述：我要一次性把【用户名、密码、所属机构】等存储到本地缓存中，怎么做？在使用过程中，如果要在新增一个【所在部门】，应该如何操作？  

//定义一个对象来存储用户信息
    let userArr = {
      name: 'Jerry',
      pass: '123123',
      compy: 'boc'
    }
    //对象中增加新的键值对，直接写
    userArr.bumen = '营业部'
    //写入缓存
    wx.setStorage({
      key: 'userInfo',
      data: userArr
    })
    //读取缓存
    wx.getStorage({
      key: 'userInfo'
    }).then(res => {
      console.log('res===', res)
    })

输出结果：

res=== {errMsg: "getStorage:ok", data: {…}}
  data:
    age: "12"
    compy: "boc"
    name: "Jerry"
    pass: "123123"
  __proto__: Object
  errMsg: "getStorage:ok"