微信小程序 Storage更新详解

微信(小程序)  /  管理员 发布于 4年前   481

前言

1、近期项目开发中接触到微信小程序，其中有部分业务需要用到数据本地存储，而微信的官方文档中并没用提供直接更新Storage的API。

2、通过wx.setStorage(Object object)可以达到覆盖原有数据达到更新的目的，但是在只修改某个对象中某个属性的值中使用这个API总感觉有点蹩脚。

3、下面笔者简单封装了一个方法用来修改Storage，若是有人知道更好的方法或者我的写法有问题还望不吝赐教。

问题描述

小程序首次登录时需要输入账号密码，首次登录成功后将账号与token保存本地。下次启动小程序验证token是否过期，未过期直接登录，若过期则重新获取token并修改之前保存本地token

常规写法

原有Storage

1、根据key"loginSetting"取出所有登录信息

2、获取新的token构建新的“loginSetting”

3、调用setStorage(Object object)保存

封装更新API

/** * 更新本地缓存数据 * key: 本地缓存中指定的 key * newData: 需要更新的内容 *  */const updateStorageInfo = param => {  var key = param.key  var newData = param.newData  var tempData = {}  wx.getStorage({    key: key,    success(res) {      var storage = res.data      for (var prop in storage) {        for (var pr in newData) {          if (prop == pr) {            storage[prop] = newData[pr]          }        }      }      tempData = storage      wx.setStorage({        key: key,        data: tempData,        success(res) {          param.success(res)        },        fail(res) {          param.fail(res)        }      })    },    fail(res) {      param.fail(res)    },    complete(res) {      param.complete(res)    }  })}

使用updateStorageInfo API

  var data = {    token: that.randomWord(false, 32)  }  util.updateStorageInfo({    key: "loginSetting",    newData: data,    success(res) {      console.log(res)    },    fail(res) {      console.log(res)    },    complete(res) {      console.log(res)    }  })

使用详解

1、原有loginSetting对象中有account，token属性，如果只需更改token属性。则只需构建需要更改内容的json对象，与更改的key。需要更改哪些数据则构建相应json即可。

2、如果更改了一个不存在的key则会进入fail callback

实现原理

1、实现思路还是需要根据key将整个对象取出，构建新对象再保存一次。之前相当于你要修改一个对象中的一个值，需要提供这个对象的标识，然后根据这个标识在本地存储中找到这个对象，接着把你需要改变的值与前面找到的数据进行合并，再保存。

2、根据key去本地查找对象与就对象和新对象匹配的逻辑类似，这也正是我们可以偷懒的地方。

源码下载

源码地址：https://github.com/SingletonH/Storage.git

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序结合Storage实现搜索历史效果
• 微信小程序实现留言板（Storage）
• localStorage实现便签小程序
• 微信小程序 Storage API实例详解
• uni-app微信小程序登录并使用vuex存储登录状态的思路详解
• 微信小程序本地存储实现每日签到、连续签到功能
• 微信小程序实现写入读取缓存详解
• 如何在微信小程序中存setStorage