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

news2024/9/30 13:14:46

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

        本地存储效果如下图:

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

八、修改时效性

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

  1. 首先是增加setTimeRange()方法,用于统一修改全局有效期范围;
  2. 对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
  }
})

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1913349.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

全网最全的接口文档速成

文章目录 接口文档内容前言1. 前后端分离开发1.1 介绍1.2 开发流程1.3 前端技术栈 2. Yapi2.1 介绍2.2 使用2.2.1 准备2.2.2 定义接口2.2.3 导出接口文档2.2.4 导入接口文档 3. Swagger3.1 介绍3.2 使用方式3.3 查看接口文档3.4 常用注解3.4.1 问题说明3.4.2 注解介绍3.4.3 注解…

【C++高阶】高效数据存储:理解并模拟实现红黑树Map与Set

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;了解 红黑树 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀模拟实现Map与Set &#x1f4d2;1.…

【RHCE】转发服务器实验

1.在本地主机上操作 2.在客户端操作设置主机的IP地址为dns 3.测试,客户机是否能ping通

PHP禁止IP访问和IP段访问(代码实例)

PHP禁止IP和IP段访问 实现IP限制是Web开发中常见的需求之一&#xff0c;它可以用于限制特定IP地址的访问权限。在PHP中&#xff0c;我们可以通过一些方法来实现IP限制。 <?//禁止某个IP$banned_ip array ("127.0.0.1",//"119.6.20.66","192.168.…

使用CANoe创建仿真项目并执行

使用CANoe创建开关控制灯亮灯灭的仿真环境 一、创建仿真工程 1.在某盘符下创建一个文件夹&#xff0c;命名为testpanel(自定义&#xff0c;与项目相关)&#xff0c;在文件夹testpanel下面分别创建CANdb、Panels和Nodes文件目录 2.打开CANoe&#xff0c;单击File→New&#xff…

分享中国-吉林省和9个地级市州人文地图

分享中国-吉林省和9个地级市州人文地图 1、吉林省 吉林省&#xff0c;位于中国东北地区中部&#xff0c;地处东北亚地理中心位置&#xff0c;因吉林市而得名&#xff0c;清康熙时在松花江畔建吉林乌拉城&#xff0c;满语意为“沿江的地方”。 吉林省以中部大黑山为界&#x…

How do I format markdown chatgpt response in tkinter frame python?

题意&#xff1a;怎样在Tkinter框架中使用Python来格式化Markdown格式的ChatGPT响应&#xff1f; 问题背景&#xff1a; Chatgpt sometimes responds in markdown language. Sometimes the respond contains ** ** which means the text in between should be bold and ### te…

[AI 大模型] Meta LLaMA-2

文章目录 [AI 大模型] Meta LLaMA-2简介模型架构发展新技术和优势示例 [AI 大模型] Meta LLaMA-2 简介 Meta LLaMA-2 是 Meta 推出的第二代开源大型语言模型&#xff08;LLM&#xff09;&#xff0c;旨在为研究和商业应用提供强大的自然语言处理能力。 LLaMA-2 系列模型包括从…

华为OD机试 - 二叉树的广度优先遍历 - 二叉树(Java 2024 D卷 200分)

华为OD机试 2024D卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;D卷C卷A卷B卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测…

算丰 2300x-SOC TPU 处理器体验,运行 langchain + chatglm3 知识库,评测对话效果海口有几个机场 | Chatopera

处理器 算丰 2300x-SOC&#xff0c;国产 AI 芯片 处理器效果不错&#xff0c;使用 models/glm3_model/chatglm3-6b_int4_1dev_2k.bmodel 达到 8.9 Token/s 知识库项目 ChatDoc-TPU 验证过程 但是知识库运行的效果差强人意&#xff0c;有待提升。过程如下&#xff1a; 上…

Kithara和OpenCV (一)

Kithara使用 OpenCV 目录 Kithara使用 OpenCV简介需求和支持的环境构建 OpenCV 库使用 CMake 进行配置以与 Kithara 一起工作 使用 OpenCV 库设置项目运行 OpenCV 代码图像采集和 OpenCV自动并行化限制和局限性1.系统建议2.实时限制3.不支持的功能和缺失的功能4.显示 OpenCV 对…

Centos7 被停用!如何利用 Ora2Pg 将 Oracle 迁移至 IvorySQL?

在过去的社区讨论中&#xff0c;想要使用或正在使用IvorySQL的社区用户&#xff0c;经常问到Oracle 如何迁移到 IvorySQL 中&#xff0c;而且近期随着 Centos7 官方已经停止维护&#xff0c;这一变动促使了很多将 Oracle 部署在 Centos7 上的 Oracle 用户&#xff0c;开始准备 …

深度学习之梯度消失

在深度学习中&#xff0c;梯度消失是指在反向传播过程中&#xff0c;随着网络层数增加或者在使用特定类型的激活函数&#xff08;如sigmoid函数&#xff09;时&#xff0c;梯度逐渐变小并最终趋近于零的现象。这种现象导致在更新参数时&#xff0c;底层网络的权重几乎不会得到有…

增强现实(AR)与虚拟现实(VR)的区别?

随着科技的飞速发展&#xff0c;增强现实&#xff08;AR&#xff09;与虚拟现实&#xff08;VR&#xff09;技术在各个领域展现出巨大的潜力和应用前景。这两种技术虽然在体验和实现方式上有所不同&#xff0c;但都为用户提供了全新的感知体验。本文将详细解析AR和VR的概念、区…

mysql查询的一些问题

解决方案一&#xff1a;给字段起别名&#xff0c;让别名与实体类属性一致 解决方案二&#xff1a;通过Results和Result注解手动映射 推荐使用方案三&#xff1a;开启驼峰命名在application.properties文件中添加mybatis.configuration.map-underscore-to-camel-casetrue

基于Java中的SSM框架实现疫情冷链追溯系统项目【项目源码+论文说明】

基于Java中的SSM框架实现疫情冷链追溯系统演示 摘要 近几年随着城镇化发展和居民消费水平的不断提升&#xff0c;人们对健康生活方式的追求意识逐渐加强&#xff0c;生鲜食品逐渐受到大众青睐&#xff0c;诸如盒马鲜生、7-fresh等品牌生鲜超市&#xff0c;一时间如雨后春笋般迅…

280个地级市金融集聚水平数据(2006-2022年)

2006年-2022年280个地级市金融集聚水平数据整理资源-CSDN文库 金融集聚水平&#xff1a;衡量地级市金融发展的新维度 金融集聚水平是衡量一个地区金融发展程度的重要指标&#xff0c;它反映了金融机构、金融资源、金融服务在特定时间和空间的集中程度。这一指标的评估可以从多…

【常见开源库的二次开发】一文学懂CJSON

简介&#xff1a; JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式。它基于JavaScript的一个子集&#xff0c;但是JSON是独立于语言的&#xff0c;这意味着尽管JSON是由JavaScript语法衍生出来的&#xff0c;它可以被任何编程语言读取和生成…

UML 2.5图的分类

新书速览|《UML 2.5基础、建模与设计实践》新书速览|《UML 2.5基础、建模与设计实践 UML 2.5在UML 2.4.1的基础上进行了结构性的调整&#xff0c;简化和重新组织了 UML规范文档。UML规范被重新编写&#xff0c;使其“更易于阅读”&#xff0c;并且“尽可能减少前向引用”。 U…

硬盘分区读不出来的应对策略与数据恢复实战

在日常的计算机使用过程中&#xff0c;硬盘分区读不出来的问题时常困扰着用户。这一故障不仅可能导致重要数据的突然失联&#xff0c;还可能对系统的稳定运行造成威胁。硬盘分区读不出来&#xff0c;往往表现为在文件资源管理器中无法访问特定分区&#xff0c;系统提示错误或分…