微信小程序本地存储增加有效期的方法

更新时间：2024年07月15日 11:44:15 作者：觉醒法师

这篇文章主要介绍了微信小程序本地存储增加有效期的方法,这里通过一个简单示例,展示如何设置有效期为1小时的本地存储,首先将storage.js引入到app.js中,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下

一、小程序本地存储API

小程序的本地存储API提供了设置存储的键值，代码如下：

const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)

本地存储如下图：

上图可见，小程序提供的本地存储API没有明确设置有效期的功能。为了解决这个问题，我们需要在存储数据时附加一个expiration字段，用于记录数据的过期时间，在获取数据时，检查当前时间是否超过了expiration指定的时间，如果超过则认为数据已失效。

由于此方法不是由小程序API直接支持的功能，而是通过检查数据的有效性来模拟有效期行为，小程序本地存储不会自动检查删除过期数据，需要在使用数据时检查数据的有效性。

二、创建Storage类

在项目中创建一个storage.js文件，用于定义LocalStorage类，对小程序本地存储API提供的wx.setStorageSync进行封装，增加数据保存有效期的限定，这里将其定义在utils目录中，代码如下：

class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默认情况下为1小时
  }
  // 保存数据
  setStorageSync(key, value){
  }
  // 获取对应key值数据
  getStorageSync(key){
  }
}

三、获取过期时间戳

在storage.js文件中，定义getStamptime()方法，用于获取过期的时间戳。这里设置的时间范围是通过小时为单位，代码如下：

// 获取时效性 - 时间戳
const getStamptime = hour => {
  const date = new Date();
  // 增加对应小时
  date.setHours(date.getHours() + hour);
  // 返回增加对应小时数后的时间戳
  return date.getTime();
}

四、检查数据是否过期

在storage.js文件中，定义checkTimeRange()方法，用于鉴定获取数据是否过期。如果数据过期则返回null，未过期则返回具体数据。代码如下：

// 检查数据是否过期
const checkTimeRange = data => {
  const time = new Date().getTime();
  // 如果当前时间超过 限定的有效期时间，则视为无效数据，返回null
  return data.expiration < time ? null : data.value;
}

五、封装小程序本地存储API

这里将小程序本地存储wx.setStorageSync进行封装，在保存数据时，通过getStamptime()方法设置其有效期；在获取数据时，通过checkTimeRange()方法判断数据是否过期，并返回对应值。

class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默认情况下为1小时
  }
  // 保存数据
  setStorageSync(key, value){
    wx.setStorageSync(key, { value,  expiration: getStamptime(this.timeRange) } )
  }
  // 获取对应key值数据
  getStorageSync(key){
    return checkTimeRange( wx.getStorageSync(key) );
  }
}

六、完整代码

封装后的storage.js文件完整代码如下：

// 检查数据是否过期
const checkTimeRange = data => {
  const time = new Date().getTime();
  // 如果当前时间超过 限定的有效期时间，则视为无效数据，返回null
  return data.expiration < time ? null : data.value;
}
// 获取时效性 - 时间戳
const getStamptime = hour => {
  const date = new Date();
  // 增加对应小时
  date.setHours(date.getHours() + hour);
  // 返回增加对应小时数后的时间戳
  return date.getTime();
}
class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默认情况下为1小时
  }
  // 保存数据
  setStorageSync(key, value){
    wx.setStorageSync(key, { value,  expiration: getStamptime(this.timeRange) } )
  }
  // 获取对应key值数据
  getStorageSync(key){
    return checkTimeRange( wx.getStorageSync(key) );
  }
}
export default new LocalStorage();

七、示例

这里通过一个简单示例，展示如何设置有效期为1小时的本地存储。首先将storage.js引入到app.js中，代码如下：

// app.js
import LocalStorage from './utils/storage'
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 展示有效期本地存储, 在有效期内只存储一次
    let time_logs = LocalStorage.getStorageSync('time_logs');
    if(!time_logs){
      time_logs = [Date.now()];
      LocalStorage.setStorageSync('time_logs', time_logs);
    }
  },
  globalData: {
    userInfo: null
  }
})

本地存储效果如下图：

重新刷新页面后，小程序提供的本地存储会继续追加数据，而增加了有效期的本地存储则在时效内不会继续执行，依然是一份数据。代码如下：

八、修改时效性

当然，时效性范围是可以被修改的，所以这里要对两种场景增加有效期范围的修改。

首先是增加setTimeRange()方法，用于统一修改全局有效期范围；对setStorageSync()方法增加有效期范围设定，用于某些特定场景需要单独设置数据的有效期范围。

另外，设置有效期范围值时，还需对其进行合法性校验后，方可赋值使用。

class LocalStorage {
  constructor(){
    this.timeRange = 1;   //默认情况下为1小时
  }
  // 检查有效期范围值是否合法，不合法默认为全局的有效期
  verifyTime(){
    return 'number'!==typeof value || value <= 0 ? this.timeRange : value;
  }
  // 修改时效范围
  setTimeRange(value){
    this.timeRange = this.verifyTime(value);
  }
  // 保存数据
  setStorageSync(key, value, expiration){
    wx.setStorageSync(key, { 
      value,  
      expiration: getStamptime( 'undefined'!==typeof expiration ? this.verifyTime(expiration) : this.timeRange ) 
    } )
  }
  // 获取对应key值数据
  getStorageSync(key){
    return checkTimeRange( wx.getStorageSync(key) );
  }
}

九、定义为全局变量

有些人可能觉得每次使用时，要单独引用会比较麻烦，这里可以将新封装的本地存储对象，绑定到wx全局对象中，就可代码如下：

// app.js
import LocalStorage from './utils/storage'
wx.$storage = LocalStorage;
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    let time_logs = wx.$storage.getStorageSync('time_logs');
    if(!time_logs){
      time_logs = [Date.now()];
      wx.$storage.setStorageSync('time_logs', time_logs);
    }
  },
  globalData: {
    userInfo: null
  }
})

所以，在小程序中，提供的本地存储没有明确的有效期设置，我们可以通过模拟有效期行为来实现这一功能。

到此这篇关于微信小程序 - 本地存储增加有效期的文章就介绍到这了,更多相关小程序有效期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript中数据结构与算法(二)：队列
这篇文章主要介绍了JavaScript中数据结构与算法(二)：队列,队列是只允许在一端进行插入操作,另一个进行删除操作的线性表,队列是一种先进先出（First-In-First-Out，FIFO）的数据结构,需要的朋友可以参考下
2015-06-06
JavaScript实现时间倒计时跳转(推荐)
这篇文章主要介绍了JavaScript实现时间倒计时跳转(推荐)的相关资料,涉及到settimeout和setinterval方法的介绍，非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
详解小程序如何动态绑定点击的执行方法
这篇文章主要介绍了详解小程序如何动态绑定点击的执行方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
Javascript ES6中对象类型Sets的介绍与使用详解
这篇文章主要给大家介绍了关于Javascript ES6中Sets的介绍与使用的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
2017-07-07
一文深入探究JavaScript中的原型链机制
在Javascript中,每个对象都有一个指向另一个对象的链接,这个链接被称为原型链,原型链是Javascript的一种继承机制,它通过链接对象的原型对象来实现属性和方法的继承,本文小编就来和大家一起深度探索JavaScript中的原型链机制
2023-09-09
JavaScript实现登录窗体
这篇文章主要为大家详细介绍了JavaScript实现登录窗体，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
CocosCreator学习之模块化脚本
这篇文章主要介绍了Cocos Creator 模块化脚本，想加深学习CocosCreator脚本的同学，一定要看一下
2021-04-04
layui 实现表单和文件上传一起传到后台的例子
今天小编就为大家分享一篇layui 实现表单和文件上传一起传到后台的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
这篇文章主要介绍了Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数的实现代码,需要的朋友可以参考下
2017-09-09
修复ie8&chrome下window的resize事件多次执行
window.onresize 事件专用事件绑定器 v0.1,用于解决 lte ie8 & chrome 及其他可能会出现的原生 window.resize 事件多次执行的 BUG.
2011-10-10