微信小程序 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 网页跳转的方法
Dec 24 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
vuejs如何配置less
Apr 25 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
vuex的使用步骤
Jan 06 Vue.js
微信小程序实现张图片合成为一张并下载
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实现给一张图片加上水印效果
2016/01/02 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jquery中radio checked问题
2015/03/16 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
不可错过的十本Python好书
2017/07/06 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
详解numpy的argmax的具体使用
2019/05/27 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
安全资料员岗位职责
2013/12/14 职场文书
犯错检讨书
2014/02/21 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫