微信小程序 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.js会在ie8下的一个奇怪问题
Nov 28 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
vue中$nextTick的用法讲解
Jan 17 Javascript
Vue实现简单计算器
Jan 20 Vue.js
使用react+redux实现计数器功能及遇到问题
Jun 02 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
WHOIS类的修改版
2006/10/09 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python中黄金分割法实现方法
2015/05/06 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python enumerate内置库用法解析
2020/02/24 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
django-csrf使用和禁用方式
2020/03/13 Python
python实现简单猜单词游戏
2020/12/24 Python
numba提升python运行速度的实例方法
2021/01/25 Python
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
支教自我鉴定
2014/01/18 职场文书
幼儿园安全责任书
2014/04/14 职场文书
大学生社会实践评语
2014/04/25 职场文书
安全生产大检查方案
2014/05/07 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python