微信小程序 - 本地存储增加有效期

🕗 发布于 2024-07-12 16:55 微信小程序 小程序

小程序的本地存储API提供了wx.setStorageSync和wx.setStorage来存储数据，注意的是，小程序的本地存储并没有明确的有效期设置，存储的数据在不超过限制的情况下，会一直保留。

一、小程序本地存储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
  }
})

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

原文地址：https://blog.csdn.net/jiciqiang/article/details/140289050

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Nature | phenocycler构建肠道组织结构图谱
下一篇：Vue 中 v-pre、v-once、v-cloak 标签的深度解析与案例展示

Nuxt.js 应用中的 schema：beforeWrite 事件钩子详解
钩子为开发者提供了一个灵活的接口，以便在写入 JSON Schema 之前进行必要的修改和验证。这使得开发者可以在构建过程中插入自定义逻辑，有助于提高应用的稳定性和准确性。钩子允许开发者在 JSON
阅读更多2024-11-17
Python习题 249：判断两个单词为相同字母异序词
（编码题）编写一个函数，判断两个单词（字符串）中有相同的单词（字符），即相同字母异序词。
阅读更多2024-11-17
第四章：ArkTS 语句全解：从基础到高级的控制流与异常处理
本文详细介绍了 ArkTS 中的多种语句，这些语句对于构建程序逻辑、控制执行流程和处理异常至关重要。
阅读更多2024-11-17
Vue.js中computed的使用方法
在Vue.js中，computed 属性是基于它们的依赖进行缓存的响应式属性。这意味着只要computed属性依赖的源数据（如data中的属性）没有发生变化，多次访问computed属性会立即返回之前
阅读更多2024-11-17
【团标】《软件造价评估实施规程》（T-BSCEA002—2023）-标准解读系列14
而对于软件造价业务开展过程中，基准数据以及相关调整因子的选取判定、评估工作开展具体步骤环节、造价输出成果要求（如造价清单、造价报告）等，《软件造价评估实施规程》（T-BSCEA002—2023）则提供
阅读更多2024-11-17
效益登记册&效益管理计划
-全生命周期会update。集商业论证、组织战略计划和其他相关项目集自标。定义管理效益所需的角色和职责;
阅读更多2024-11-17
我手搓了个“自动生成标书”的开源大模型工具
最近我写开源商业文章明显更新少了，不是我不写文章了，而是开源商业化进展很顺利，我写文章的时间都被各种写标书占满了。作为一个开源原生的商业公司，白鲸开源公司的员工几乎都是程序员，而让这些开源贡献者写标书
阅读更多2024-11-17
奥迪股份如何通过升级至SAP S/4HANA实现财务与后勤的高效整合？
为了避免成本高昂的临时解决方案，奥迪公司希望将所有工厂后勤（后勤和生产的一部分）同时迁移到SAP S/4HANA，并集成到生产模板“Progress”中。随着多个项目的筹备，奥迪股份公司在 2023
阅读更多2024-11-17
linux逻辑卷练习
从新硬盘制作三个分区每个分区都 3GB大小，将三个分区只作为物理卷，通过这三个物理卷创建卷组通过卷组生成一个逻辑卷，大小为7G，再将逻辑卷调整到10G。物理卷（physical volume）：简
阅读更多2024-11-17
Vagrant 没了 VirtualBox 的话可以配 Qemu
之前一直是用 Vagrant 搭配 VirtualBox 在 Mac 下使用 Linux 虚拟机，因为不需要用到 Linux 桌面，用 Vagrant 操作虚拟机非常方便。有些尚未听说过，还有一些虽说
阅读更多2024-11-17

微信小程序 - 本地存储 增加有效期