微信小程序 Storage更新详解


Posted in Javascript onJuly 16, 2019

前言

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

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

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

问题描述

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

常规写法

原有Storage

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
JS的get和set使用示例
Feb 20 Javascript
jquery实现保存已选用户
Jul 21 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 #Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
JS实现的排列组合算法示例
Jul 16 #Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 #Javascript
详解微信小程序支付流程与梳理
Jul 16 #Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 #Javascript
JAVA面试题 static关键字详解
Jul 16 #Javascript
You might like
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
如何在PHP中生成随机数
2020/06/04 PHP
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python常规方法实现数组的全排列
2015/03/17 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
一文读懂Python 枚举
2020/08/25 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
竞选村长演讲稿
2014/04/28 职场文书
养牛场项目建议书
2014/05/13 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
瘦西湖导游词
2015/02/03 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android