微信小程序 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 对象是否存在判断
Jul 15 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
JS防抖和节流实例解析
Sep 24 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
PHP 批量删除 sql语句
2009/06/05 PHP
php获取图片信息的方法详解
2015/12/10 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
python高级特性和高阶函数及使用详解
2018/10/17 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
PyQt5实现简易电子词典
2019/06/25 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
求职面试个人自我评价
2014/02/28 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
预防传染病方案
2014/06/14 职场文书
化工工艺设计求职信
2014/06/25 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
初婚未育证明样本
2015/06/18 职场文书
Nginx HTTP跳转至HTTPS
2022/05/15 Servers