微信小程序 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 Math对象
Aug 13 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
详解Axios 如何取消已发送的请求
Oct 20 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
如何使JavaScript休眠或等待
Apr 27 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
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
php实现简单的上传进度条
2015/11/17 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
解读ES6中class关键字
2017/11/20 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python中正则表达式的详细教程
2015/04/30 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Django 用户认证组件使用详解
2019/07/23 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
Python实现随机爬山算法
2021/01/29 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
预备党员公开承诺书
2014/05/28 职场文书
职务任命书范本
2014/06/05 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
神秘岛读书笔记
2015/07/01 职场文书