微信小程序 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 相关文章推荐
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
微信小程序实现张图片合成为一张并下载
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生成自己的LOG文件
2006/10/09 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
JavaScript中的Math.LOG2E属性使用详解
2015/06/14 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
js回调函数仿360开机
2019/12/26 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
如何在django中添加日志功能
2020/02/06 Python
python 实现两个线程交替执行
2020/05/02 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
新浪网技术部笔试题
2016/08/26 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
就业自荐书
2013/12/05 职场文书
如何写自我鉴定
2014/03/19 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
财政局个人总结
2015/03/04 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python