微信小程序 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 target与currentTarget区别说明
Aug 28 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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/10/09 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
javascript中的几个运算符
2007/06/29 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
Python3 读、写Excel文件的操作方法
2018/10/20 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
Python restful框架接口开发实现
2020/04/13 Python
python输出数学符号实例
2020/05/11 Python
了解一下python内建模块collections
2020/09/07 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
物控部经理职务说明书
2014/02/25 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
银行授权委托书样本
2014/10/13 职场文书
大学教师个人总结
2015/02/10 职场文书
鸦片战争观后感
2015/06/09 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js