【微信小程序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"

你可能感兴趣的:(Mob移动端实践笔记,缓存,微信小程序,前端,javascript,es6)