微信小程序 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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
javascript parseInt 大改造
Sep 27 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
原生js实现选项卡功能
Mar 08 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
JS正则表达式封装与使用操作示例
May 15 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
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
javascript 闭包疑问
2010/12/30 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
webpack4实现不同的导出类型
2019/04/09 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python reduce()函数的用法小结
2017/11/15 Python
python实现ID3决策树算法
2017/12/20 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
django如何实现视图重定向
2019/07/24 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
《学会待客》教学反思
2014/02/22 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
搭建Yolov5服务器
2022/04/30 Servers
Java 多线程并发FutureTask
2022/06/28 Java/Android