微信小程序 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弹出窗口代码大全(详细整理)
Dec 21 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
Angular网络请求的封装方法
May 22 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
微信小程序实现张图片合成为一张并下载
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生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
require.js中的define函数详解
2017/07/10 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
基于Python的接口测试框架实例
2016/11/04 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Python rstrip()方法实例详解
2018/11/11 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
python中可以声明变量类型吗
2020/06/18 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
Linux中如何用命令创建目录
2016/12/02 面试题
什么是抽象
2015/12/13 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
任命书怎么写
2014/06/04 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
给上级领导的感谢信
2015/01/22 职场文书
java泛型通配符详解
2021/07/25 Java/Android