这次给你们安利的是微信小程序封装storage,先说下微信官方的

       wx.getStorage({
key:"",
success: function (res) { },
fail(error){ }
})

官方的方法用起来很麻烦,和我们之前习惯用localStorage.getItem看这个就很别扭,你也一样对吧,别问我怎么知道的  你来这文章的时候你肯定就是不习惯官方的,没关系,我给你封装好了。

第一步、根目录新建utils目录,目录内新建一个utils.js的文件

第二步、复制下方代码到utils.js文件

class Utils  {
constructor() {
super()
this.storage = {
/**
* @description 读取本地存储,
* @param { string } 要读取的key
* @param {boolean} 是否是同步
* @todo 赌气本地存储,判断key只能是string且非纯空格 如果不是将报错,
*/
Get: function (key, isSync = false) {
if (typeof key != "string") {
throw new Error("key is typeof string at Utils.storage.Get");
return false;
}
if (key.Trim() == "") {
throw new Error("key is not null at Utils.storage.Get");
return false;
}
return new Promise((resolve, reject) => {
if (isSync) {
let result = wx.getStorageSync(key.Trim());
if(result != ""){
resolve(result);
}else{
reject("getStorage:fail data not found");
}
} else {
wx.getStorage({
key:key.Trim(),
success: function (res) {
let result = res.data;
resolve(result)
},
fail(error){
reject(error.errMsg);
}
})
}
})
},
/**
* @description 设置本地存储,
* @param { string } 存储的key
* @param { * } 存储的内容
* @param {boolean} 是否是同步
* @todo 设置本地存储,判断key只能是string且非纯空格 如果不是将报错,
*/
Set: function (key, data, isSync = false) {
if (typeof key != "string") {
throw new Error("key is typeof string at Utils.storage.Set");
return false;
}
if (key.Trim() == "") {
throw new Error("key is not null at Utils.storage.Set");
return false;
}
return new Promise((resolve, reject) => {
if (isSync) {
wx.setStorageSync(key.Trim(), data)
resolve({
errMsg: "storage okey",
});
} else {
wx.setStorage({
key:key.Trim(),
data,
success: function (res) {
resolve({
errMsg: "storage okey",
})
},
})
}
})
},
/**
* @description 清理本地存储,
* @param { string } 存储的key(为空将清空所有)
* @param {boolean} 是否是同步
* @todo 清理本地存储,如果key为空则清空所有,如果key不为空则清空指定的key
*/
rm: function (key = "", isSync = false) {
if (typeof key != "string") {
throw new Error("key is typeof string at Utils.storage.rm");
return false;
}
return new Promise((resolve, reject) => {
if (key == "") {
if (isSync) {
wx.clearStorage({
success() {
resolve({
errMsg: "clearStorage is okey"
})
}
})
} else {
wx.clearStorageSync();
resolve({
errMsg: "clearStorage is okey"
})
}
} else {
if (!isSync) {
wx.removeStorage({
key:key.Trim(),
success() {
resolve({
errMsg: "clearStorage is okey"
})
}
})
} else {
wx.removeStorage(key.Trim());
resolve({
errMsg: "clearStorage is okey"
})
}
}
})
}
}
}
}
/**
* @public
* @author jinzhenzong
* @description 为string新增方法,trim为string去掉两端空格
*/
String.prototype.Trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
export {
Utils
}

第三步、使用

目标页面引入

import { Utils } from "../../utils/util.js"
data里面新建一个utils的变量,如下图所示,onload对这歌变量初始化

在需要的地方这么用:

this.data.utils.storage.Get("userser").then(res => {
console.log(res); }).catch(error => {
})

需要设置请用.Set需要异步的话请在第二个参数设为true,该文件是promise风格,兼容了对key的名称判断,以及是否是异步进行了判断,

微信小程序封装storage(含错误处理)的更多相关文章

  1. 微信小程序官方文档错误整理

    大致看了一遍微信小程序文档,发现有几处微小的错误,但瑕不掩瑜.记录下,以后发现了还会继续在此添加.如果有记录不对的,请及时指出错误. 1.视图层->WXSS->尺寸单位 明显错误,应该为 ...

  2. 关于微信小程序的Request请求错误处理

    在学微信小程序的request请求的时候,一开始报“不在以下合法域名列表中,请参考文”的错误,后来又莫名其妙的报“400 Bad Request”错误,经过半天的研究,终于搞定了,把遇到的错误给大家分 ...

  3. 微信小程序: 编译.wxss文件错误解决

    博主最近又重新开始捡起微信小程序,想做点自己的东西.了解到最近小程序工具有做更新,就顺手更新了最新的版本,功能比之前强大了不少!  更新归更新,更新后控制台就一直报下面这个错误:  解决办法 有问题总 ...

  4. 微信小程序 封装请求

    在写小程序的时候,每个JS文件都一大堆的请求,看得自己都眼花缭乱,下面看一下怎么对请求方法进行封装. 1,方法封装,在util文件夹下新建文件,创建request.js文件,工具文件,用于对方法封装) ...

  5. 微信小程序封装自定义弹窗

    最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中 ...

  6. 微信小程序之上传图片(含前后端代码例子)

    此代码示例,能够让你成功将图片上传至后端,后端做相应的处理,然后返回成功码. 前端小程序代码 index.wxml: <view class='content'> <view cla ...

  7. 微信小程序封装年月日时分组件

    第一步,在page下新建component文件,放你封装的小组件,和vue里的component差不多 第二步,在需要使用的组件的.json文件中添加usingComponents 第三步,在页面中引 ...

  8. 微信小程序封装http访问网络库实例代码

    之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接 ...

  9. 微信小程序 封装接口

    1.util-util.js //封装接口 let baseURL = 'http://127.0.0.1:3000/'; //接口路径 let request = function (url, op ...

随机推荐

  1. CodeForces 25C(Floyed 最短路)

    F - Roads in Berland Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I6 ...

  2. Java编程思想第四版勘误

    坊间传说这本书翻译得很烂,我倒觉得还好.虽然看原文更准确,但是如果在具备一定编程思维和基础.能够看出来疑问的情况下,还是看中文更快一些,而且这本书本身也不适合初学者看.当然,错误和不通顺还是有的,而且 ...

  3. 使用log4net做应用程序全局日志记录保存在数据库中

    几乎所有的大型应用都会有自己的用于跟踪调试的API.因为一旦程序被部署以后,就不太可能再利用专门的调试工具了.然而一个管理员可能需要有一套强大的日志系统来诊断和修复配置上的问题.经验表明,日志记录往往 ...

  4. JIRA licence crack and etc

    https://my.oschina.net/u/199525/blog/313788 http://blog.csdn.net/joinandjoin/article/details/9052785 ...

  5. Python开发【前端】:Ajax(二)

    原生Ajax.JQuery.伪Ajax三种方式使用优先级 如果发送的是[普通数据] jQuery XMLHttpRequest iframe 如果发送的是[文件] iframe jQuery(Form ...

  6. sql server 驱动程序在 \Device\RaidPort0 上检测到控制器错误。

    sql server 驱动程序在 \Device\RaidPort0 上检测到控制器错误. 错误情况,如下图: 原因分析:硬盘故障 解决办法:进行迁移

  7. 新安装和已安装nginx如何添加未编译安装模块/补丁

    新安装和已安装nginx如何添加未编译安装模块/补丁 --http://www.apelearn.com/bbs/forum.php?mod=viewthread&tid=10485& ...

  8. Amber安装并行

    现在简单介绍一下amber12中安装openmpi并行的过程. 1. 下载openmpi版本在1.5-1.9之间的(openmpi-1.6.5.tar.bz2) 这是因为$AMBERHOME/Ambe ...

  9. linux安装Navicat,界面出现乱码解决方法

    下载Navicat:navicat112_mariadb_cs_x64.tar.gz 点击" ./start_navicat"安装出现界面便面为乱码 解决办法:打开start_na ...

  10. cocos代码研究(11)ActionManager类学习笔记

    理论部分 ActionManager是一个单例类,管理所有动作. 通常你不需要直接使用这个类.大多情况下,你将使用Node的接口,它提供了更友好的封装 但也有一些情况下,你可能需要使用这个单例. 示例 ...