微信小程序缓存支持二次开发封装实现解析

这篇文章主要介绍了微信小程序缓存支持二次开发封装实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

简介

微信小程序提供了缓存的api，包括同步和异步两种，具体api不多说明，可自行查看官方文档

现在微信小程序缓存api存在一个问题就是没有设定过期时间，下面给大家介绍一下对小程序缓存的二次封装，使其支持设定过期时间

实现方法

先声明，这个并非原创方法，只是查找资料的时候看到的，觉得挺有用，就记录下来，也算转播给大家

原作链接：https://gitee.com/JiangMu/wcache，侵删

微信小程序缓存是永久性，实际开发中需要定制时效性缓存；因此做了二次开发

设置缓存-----------put(k, v, t) k为key，v为具体内容（支持字符串、json、数组、boolean等等），t为可选参数表示有效时间（单位：秒）如存储k为123过期时间1秒，

则调用put('k', '123', 1)方法；若永久存储调用put('k', '123') 永久保存json：put('k', {"a":"1"})，数组、boolean等同理。

function put(k, v, t) {
 wx.setStorageSync(k, v)
 var seconds = parseInt(t);
 if (seconds > 0) {
  var timestamp = Date.parse(new Date());
  timestamp = timestamp / 1000 + seconds;
  wx.setStorageSync(k + dtime, timestamp + "")
 } else {
  wx.removeStorageSync(k + dtime)
 }
}

读取缓存-----get(k, def)-------def(自定义读取失败的默认值) k为key，def为可选参数，表示无缓存数据时返回值（支持字符串、json、数组、boolean等等）

如读取k缓存，则调用get('k')；若想要无缓存时，返回默认值则get('k','默认值')，支持各个数据类型。

function get(k, def) {
 var deadtime = parseInt(wx.getStorageSync(k + dtime))
 if (deadtime) {
  if (parseInt(deadtime) < Date.parse(new Date()) / 1000) {
   if (def) { return def; } else { return; }
  }
 }
 var res = wx.getStorageSync(k);
 if (res) {
  return res;
 } else {
  return def;
 }
}

remove(k)移除某个key

clear()清空所有key

完整代码：

var dtime = '_deadtime';
function put(k, v, t) {
 wx.setStorageSync(k, v)
 var seconds = parseInt(t);
 if (seconds > 0) {
  var timestamp = Date.parse(new Date());
  timestamp = timestamp / 1000 + seconds;
  wx.setStorageSync(k + dtime, timestamp + "")
 } else {
  wx.removeStorageSync(k + dtime)
 }
}

function get(k, def) {
 var deadtime = parseInt(wx.getStorageSync(k + dtime))
 if (deadtime) {
  if (parseInt(deadtime) < Date.parse(new Date()) / 1000) {
   if (def) { return def; } else { return; }
  }
 }
 var res = wx.getStorageSync(k);
 if (res) {
  return res;
 } else {
  return def;
 }
}

function remove(k) {
 wx.removeStorageSync(k);
 wx.removeStorageSync(k + dtime);
}

function clear() {
 wx.clearStorageSync();
}

module.exports = {
 put: put,
 get: get,
 remove: remove,
 clear: clear,
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序HTTP接口请求封装代码实例

    1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装) request.js: var app = getApp(); //项目URL相同部分,减轻代码量,同时方便项目迁移 //这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息 var host = 'http://localhost:8081/demo/'; /** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回

  • 微信小程序HTTP请求从0到1封装

    前言 作为一个前端开发者,从最开始的js.jQuery一把梭,后来的vue.react.angular等MVVM.MVC框架,我们在开发工程中都离不开HTTP库的使用. HTTP库 1.jQuery的$.ajax 调用了XMLHttpRequest对象,封装在相关函数在配置项中,一旦传入了必需选项,则直接调用相应的send()方法进行数据的请求 2.Axios 基于Promise的请求库,通过判断XMLHTTPRequest对象存在与否,来支持客户端和node服务端发送请求,封装的很不错的HTT

  • 微信小程序 数据缓存实现方法详解

    微信小程序可以通过wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)对本地缓存进行设置.获取和清理.本地缓存最大为10MB. wx.setStorage()---------异步设置缓存 微信官方给出的属性 OBJECT参数说明: 参数 类型 必填 说明 key String 是 本地缓存中的指定的 key data Object/String

  • 微信小程序本地缓存数据增删改查实例详解

    微信小程序本地缓存数据增删改查实例详解 数据如: var user = { name: 'Lion', sex: 'guy' } CRUD: // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx.getStorageSync('user') || []); // 更改 developer.name = 'Lion01'; wx.setStorageSync('user', user); // 删除 wx.removeSt

  • 微信小程序实现元素渐入渐出动画效果封装方法

    微信小程序实现元素渐入渐出动画效果封装方法

    开端 之前一直使用堪称"万能"的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其"无能为力". 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了.做到类似jQuery show()的效果 原创文章,允许转载分享.但请转载请一定标明出处,这是起码的尊重 本文章阅读前需要对微信小程序的动画api有所了解 先看效果 可以看到,动画效果十分流畅,高度复用,封装好后只需要三行代码实现动画 解决 1.寻根问底,发现

  • 微信小程序-详解数据缓存

    微信小程序-详解数据缓存

    每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localStorage 是永久存储的,但是我们不建议将关键信息全部存在 localStorage,以防用户换设备的情况. wx.setStorage(OBJECT) 将数据存储

  • 微信小程序 使用picker封装省市区三级联动实例代码

    微信小程序 使用picker封装省市区三级联动实例代码

    微信小程序 使用picker封装省市区三级联动实例 目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的.那么我的思路是这样的: 1.使用template模板语法进行封装,数据从页面传入 2.根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个地区的唯一码来触发下一级联动数据.这样,我的做法

  • 微信小程序 缓存（本地缓存、异步缓存、同步缓存）详解

    微信小程序 缓存 关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync) 可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB 2.localStorage 是永久存储 一.异步缓存 wx.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容 wx.setStor

  • 微信小程序缓存过期时间的使用详情

    关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB 2.localStorage 是永久存储 相应的api---------- wx.setStorage(OBJECT) wx.getStorage(OBJECT) wx.getStorageInfo(OBJECT) w

  • 微信小程序缓存支持二次开发封装实现解析

    这篇文章主要介绍了微信小程序缓存支持二次开发封装实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 简介 微信小程序提供了缓存的api,包括同步和异步两种,具体api不多说明,可自行查看官方文档 现在微信小程序缓存api存在一个问题就是没有设定过期时间,下面给大家介绍一下对小程序缓存的二次封装,使其支持设定过期时间 实现方法 先声明,这个并非原创方法,只是查找资料的时候看到的,觉得挺有用,就记录下来,也算转播给大家 原作链接:https:/

  • 详解微信小程序缓存--缓存时效性

    关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB 2.localStorage 是永久存储 相应的api---------- wx.setStorage(OBJECT) wx.getStorage(OBJECT) wx.getStorageInfo(OBJECT) w

  • 微信小程序动态生成二维码的实现代码

    微信小程序动态生成二维码的实现代码

    效果图如下: 实现 wxml <!-- 存放二维码的图片--> <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view> <!-- 画布,用来画二维码,只用来站位,不用来显示--> <view class=&qu

  • 微信小程序缓存过期时间的相关设置

    目录 微信小程序缓存机制介绍 哪些是一定需要过期的缓存 写法 微信小程序缓存机制介绍 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理. 但是微信默认设置了缓存是无限长的过期时限,这对于我们的小程序开发,是非常不好的. 哪些是一定需要过期的缓存 我正在开发的项目

  • 微信小程序以ssm做后台开发的实现示例

    微信小程序任何的语言都可以做后台,现在微信小程序推出云函数,做后台也可以.但是自己感觉想要完整的后台,做后台用java和php更好点.下面以典型的例证给大家做一下讲解,注册. 1.wmxl 微信小程序的前段代码(提交数据主要以from表单实现的) <view class="btn-submit"> <button formType="reset">请完善注册信息</button> </view> <form ca

  • 微信小程序自定义支持图片的弹窗

    本文实例为大家分享了微信小程序自定义支持图片的弹窗,供大家参考,具体内容如下 为index.wxml添加如下图代码: (微信小程序 - canvas层级最高问题,如何超越canvas的层级,只能使用cover-view标签) <!--index.wxml--> <button class="show-btn" bindtap="showDialogBtn">弹窗</button> <!--弹窗--> <cover

  • 微信小程序获取用户头像昵称组件封装实例(最新版)

    目录 一.前言 二.组件使用 下载组件 组件导入 引用组件 使用组件 三.浅谈业务逻辑设置 注意事项 兼容性 四.结语 一.前言 微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大. 更多详情查看公告:公告直达链接 我的项目比较多,而且大部分都是只需要获取用户的头像以及昵称,并不需要像官方的“最佳实践案例”那样,还需要用户设置其他信息.因此自己进行了一个组件封装,以弹窗形式让用户授权或设置头像以及昵称. 博客中也会浅谈一下该如何对新旧接口进行业务逻

  • 微信小程序全局变量GLOBALDATA的定义和调用过程解析

    微信小程序全局变量GLOBALDATA的定义和调用过程解析

    这篇文章主要介绍了微信小程序全局变量GLOBALDATA的定义和调用过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.在小程序文件app.js里面定义全局变量 二.在页面上使用或修改 在页面中引入 调用全局变量值 改变全局变量值 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

随机推荐