微信小程序 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 27 Javascript
ext监听事件方法[初级篇]
Apr 27 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 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 array_flip() 删除数组重复元素
2009/01/14 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python3运算符常见用法分析
2020/02/14 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
如何实现jdbc性能优化
2012/07/30 面试题
学年自我鉴定
2014/01/16 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
企业理念标语
2014/06/09 职场文书
工商局调档介绍信
2015/10/22 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis