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

  1.        wx.getStorage({
  2. key:"",
  3. success: function (res) {
  4.  
  5. },
  6. fail(error){
  7.  
  8. }
  9. })

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

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

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

  1. class Utils {
  2. constructor() {
  3. super()
  4. this.storage = {
  5. /**
  6. * @description 读取本地存储,
  7. * @param { string } 要读取的key
  8. * @param {boolean} 是否是同步
  9. * @todo 赌气本地存储,判断key只能是string且非纯空格 如果不是将报错,
  10. */
  11. Get: function (key, isSync = false) {
  12. if (typeof key != "string") {
  13. throw new Error("key is typeof string at Utils.storage.Get");
  14. return false;
  15. }
  16. if (key.Trim() == "") {
  17. throw new Error("key is not null at Utils.storage.Get");
  18. return false;
  19. }
  20. return new Promise((resolve, reject) => {
  21. if (isSync) {
  22. let result = wx.getStorageSync(key.Trim());
  23. if(result != ""){
  24. resolve(result);
  25. }else{
  26. reject("getStorage:fail data not found");
  27. }
  28. } else {
  29. wx.getStorage({
  30. key:key.Trim(),
  31. success: function (res) {
  32. let result = res.data;
  33. resolve(result)
  34. },
  35. fail(error){
  36. reject(error.errMsg);
  37. }
  38. })
  39. }
  40. })
  41. },
  42. /**
  43. * @description 设置本地存储,
  44. * @param { string } 存储的key
  45. * @param { * } 存储的内容
  46. * @param {boolean} 是否是同步
  47. * @todo 设置本地存储,判断key只能是string且非纯空格 如果不是将报错,
  48. */
  49. Set: function (key, data, isSync = false) {
  50. if (typeof key != "string") {
  51. throw new Error("key is typeof string at Utils.storage.Set");
  52. return false;
  53. }
  54. if (key.Trim() == "") {
  55. throw new Error("key is not null at Utils.storage.Set");
  56. return false;
  57. }
  58. return new Promise((resolve, reject) => {
  59. if (isSync) {
  60. wx.setStorageSync(key.Trim(), data)
  61. resolve({
  62. errMsg: "storage okey",
  63. });
  64. } else {
  65. wx.setStorage({
  66. key:key.Trim(),
  67. data,
  68. success: function (res) {
  69. resolve({
  70. errMsg: "storage okey",
  71. })
  72. },
  73. })
  74. }
  75. })
  76. },
  77. /**
  78. * @description 清理本地存储,
  79. * @param { string } 存储的key(为空将清空所有)
  80. * @param {boolean} 是否是同步
  81. * @todo 清理本地存储,如果key为空则清空所有,如果key不为空则清空指定的key
  82. */
  83. rm: function (key = "", isSync = false) {
  84. if (typeof key != "string") {
  85. throw new Error("key is typeof string at Utils.storage.rm");
  86. return false;
  87. }
  88. return new Promise((resolve, reject) => {
  89. if (key == "") {
  90. if (isSync) {
  91. wx.clearStorage({
  92. success() {
  93. resolve({
  94. errMsg: "clearStorage is okey"
  95. })
  96. }
  97. })
  98. } else {
  99. wx.clearStorageSync();
  100. resolve({
  101. errMsg: "clearStorage is okey"
  102. })
  103. }
  104. } else {
  105. if (!isSync) {
  106. wx.removeStorage({
  107. key:key.Trim(),
  108. success() {
  109. resolve({
  110. errMsg: "clearStorage is okey"
  111. })
  112. }
  113. })
  114. } else {
  115. wx.removeStorage(key.Trim());
  116. resolve({
  117. errMsg: "clearStorage is okey"
  118. })
  119. }
  120. }
  121. })
  122. }
  123. }
  124. }
  125. }
  126. /**
  127. * @public
  128. * @author jinzhenzong
  129. * @description 为string新增方法,trim为string去掉两端空格
  130. */
  131. String.prototype.Trim = function () {
  132. return this.replace(/(^\s*)|(\s*$)/g, "");
  133. }
  134. export {
  135. Utils
  136. }

第三步、使用

目标页面引入

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

在需要的地方这么用:

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

需要设置请用.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. oracle Bug 4287115(ora-12083)

    今天公司开发在删除表时报错ora-12083,很是疑惑,数据字典记录的是表,而删除要用物化视图方式删除,如下: SQL> DROP TABLE CODE_M_AGENCY;DROP TABLE ...

  2. Andrew Ng机器学习公开课笔记 -- Generative Learning algorithms

    网易公开课,第5课 notes,http://cs229.stanford.edu/notes/cs229-notes2.pdf 学习算法有两种,一种是前面一直看到的,直接对p(y|x; θ)进行建模 ...

  3. Django - 路由层(URLconf)

    一.django 静态文件配置 /mysite1/settings.py STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_ ...

  4. vue - 准备知识

    一.知识 http://www.cnblogs.com/majj/https://www.cnblogs.com/majj/category/1216624.html 阮一峰 es6http://es ...

  5. 过山车---hdu2063(最大匹配)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2063最大匹配模板题: #include <iostream> #include <c ...

  6. Scrapy框架(3)

    一.如何提升scrapy框架的爬取效率 增加并发: 默认scrapy开启的并发线程为32个,可以适当进行增加.在settings配置文件中修改CONCURRENT_REQUESTS = 100,并发设 ...

  7. redhat 7.2 内网安装docker

    本文介绍在内网环境下如果通过网络代理映射来完成docekr的安装,首先在能上网的windows机器上安装squid,并启动,本实例中windows机器IP为 192.168.192.101 ,squi ...

  8. python-pdf添加水印

    0.用到两个扩展模块:ReportLab.PyPDF2. 1.创建水印PDF. 1).创建文字水印pdf文件 代码: #encoding=utf-8 #author: walker #date: 20 ...

  9. cocos2d-x-3.0 window+eclipse Android Project 环境与开发新手教程

    今天闲来没事,听说最新cocos2d-x 出新版3.0.所以来学习一下. 大致參考官方教程:http://www.cocos2d-x.org/wiki/How_to_Build_an_Android_ ...

  10. OC发送短信

    - (IBAction)sendMessage1:(id)sender { UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@" ...