微信小程序 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 相关文章推荐
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 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
第八节--访问方式
2006/11/16 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
在vue中利用v-html按分号将文本换行的例子
2019/11/14 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
用python爬取租房网站信息的代码
2018/12/14 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
人事助理自荐信
2014/02/02 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
学校党员对照检查材料
2014/08/28 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
python3中apply函数和lambda函数的使用详解
2022/02/28 Python