微信小程序 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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
jquery remove方法应用详解
Nov 22 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
JS Attribute属性操作详解
May 19 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 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
php中inlcude()性能对比详解
2012/09/16 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
Prototype Array对象 学习
2009/07/19 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python模块restful使用方法实例
2013/12/10 Python
python中__call__内置函数用法实例
2015/06/04 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
股权转让意向书
2014/04/01 职场文书
促销活动总结范文
2014/04/30 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
vue实现简易音乐播放器
2022/08/14 Vue.js