微信小程序 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 相关文章推荐
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
javascript实现遮罩层动态效果实例
May 14 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
JavaScript实现HSL拾色器
May 21 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
全网小程序接口请求封装实例代码
Nov 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
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python制作Windows系统服务
2017/03/25 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
用Django写天气预报查询网站
2018/10/21 Python
彻底理解Python中的yield关键字
2019/04/01 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
什么是类的返射机制
2016/02/06 面试题
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
房地产销售经理岗位职责
2014/01/01 职场文书
《尊严》教学反思
2014/02/11 职场文书
租房协议书范文
2014/08/20 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android