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

        小程序的本地存储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();// 如果当前时间超过 限定的有效期时间,则视为无效数据,返回nullreturn 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();// 如果当前时间超过 限定的有效期时间,则视为无效数据,返回nullreturn 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://xiahunao.cn/news/3224480.html

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

相关文章

容器docker

文章目录 前言一、docker1.1 为什么有docker1.2 docker架构1.3 docker 安装1.4 docker中央仓库1.5 docker 基本指令1.6 docker数据卷&#xff0c;挂载例&#xff1a;nginx 数据卷挂载例&#xff1a;mysql 本地持久化 1.7 镜像制作镜像结构dockerfile基础指令容器生成镜像 1.8 d…

C++笔试强训3

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、选择题1-5题6-10题 二、编程题题目一题目二 一、选择题 1-5题 如图所示&#xff0c;如图所示p-3指向的元素是6&#xff0c;printf里面的是%s&#xff0c;从6开…

带有子节点的树状表的父节点拖动排序#Vue3#Sortable插件

带有子节点的树状表的父节点拖动排序#Vue3#Sortable插件 使用Sortable插件这里要保证获取到的是父节点的下标&#xff0c;属性newDraggableIndex获取到的就是只有父节点的下标。设置子节点不能被拖动&#xff0c;最后在逐个调用接口进行数据库中顺序的更新。 <template>…

层次分析法上课笔记

欢迎来到一夜看尽长安花 博客&#xff0c;您的点赞和收藏是我持续发文的动力 对于文章中出现的任何错误请大家批评指出&#xff0c;一定及时修改。有任何想要讨论的问题可联系我&#xff1a;3329759426qq.com 。发布文章的风格因专栏而异&#xff0c;均自成体系&#xff0c;不足…

Profibus转ModbusTCP网关模块实现Profibus_DP向ModbusTCP转换

Profibus和ModbusTCP是工业控制自动化常用的二种通信协议。Profibus是一种串口通信协议&#xff0c;它提供了迅速靠谱的数据传输和各种拓扑结构&#xff0c;如总线和星型构造。Profibus可以和感应器、执行器、PLC等各类设备进行通信。 ModbusTCP是一种基于TCP/IP协议的通信协议…

使用八股搭建神经网络

神经网络搭建八股 使用tf.keras 六步法搭建模型 1.import 2.train, test 指定输入特征/标签 3.model tf.keras.model.Sequential 在Squential,搭建神经网络 4.model.compile 配置训练方法&#xff0c;选择哪种优化器、损失函数、评测指标 5.model.fit 执行训练过程&a…

python开发prometheus exporter--用于hadoop-yarn监控

首先写python的exporter需要知道Prometheus提供4种类型Metrics 分别是&#xff1a;Counter, Gauge, Summary和Histogram * Counter可以增长&#xff0c;并且在程序重启的时候会被重设为0&#xff0c;常被用于任务个数&#xff0c;总处理时间&#xff0c;错误个数等只增不减的指…

昇思25天学习打卡营第16天|Vision Transformer图像分类

昇思25天学习打卡营第16天|Vision Transformer图像分类 前言Vision Transformer图像分类Vision Transformer&#xff08;ViT&#xff09;简介模型结构模型特点 环境准备与数据读取模型解析Transformer基本原理Attention模块 Transformer EncoderViT模型的输入整体构建ViT 模型训…

xcode项目添加README.md文件并进行编辑

想要给xcode项目添加README.md文件其实还是比较简单的&#xff0c;但是对于不熟悉xcode这个工具的人来讲&#xff0c;还是有些陌生&#xff0c;下面简单给大家讲一下流程。 选择“文件”>“新建”>“文件”&#xff0c;在其他&#xff08;滚动到工作表底部&#xff09;下…

k8s record 20240708

一、PaaS 云平台 web界面 资源利用查看 Rancher 5台 CPU 4核 Mem 4g 100g的机器 映射的目录是指docker重启后&#xff0c;数据还在 Rancher可以创建集群也可以托管已有集群 先docker 部署 Rancher&#xff0c;然后通过 Rancher 部署 k8s 想使用 kubectl 还要yum install 安…

leetcode--验证二叉搜索树

leetcode地址&#xff1a;验证二叉搜索树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左 子树 只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必…

71.WEB渗透测试-信息收集- WAF、框架组件识别(11)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;70.WEB渗透测试-信息收集- WAF、框架组件识别&#xff08;10&#xff09;-CSDN博客 如果有…

人工智能和机器学习 (复旦大学计算机科学与技术实践工作站)20240703(上午场)人工智能初步、mind+人脸识别

前言 在这个科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;已经逐渐渗透到我们生活的方方面面&#xff0c;从智能家居到自动驾驶&#xff0c;无一不彰显着AI的强大潜力。而人脸识别技术作为AI领域的一项重要应用&#xff0c;更是以其高效、便捷的特点受到了…

人工智能算法工程师(中级)课程2-Opencv视觉处理之高级操作

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能算法工程师(中级)课程2-Opencv视觉处理之高级操作。在上一节课中的OpenCV基础操作我们了解到OpenCV是一个开源的计算机视觉软件库。它提供了各种视觉处理函数&#xff0c;并支持多种编程语言&#xff0c;如…

USB眼图eye diagram测试

前言: USB有一种测量称为EYE图或信号完整性测试。考虑数字信号从发射机传输到接收机的过程。到达接收器的信号质量可能受到许多因素的影响,包括发射器、电缆或PCB迹线以及连接器。信号质量也被称为信号完整性。眼图是一种用于快速评估数字信号质量的图形工具。眼图这个名字之…

Gymnasium 借游戏来学习人工智能

既然有了免费的linux系统GPU&#xff0c;干脆演示一下使用drivecolab套件来训练模型。 !apt-get install -y build-essential swig !pip install box2d-py !pip install gymnasium[all] !pip install gymnasium[atari] gymnasium[accept-rom-license] !pip install stable_bas…

Python函数 之 模块和包

1.模块 1, 在Python 中, 每个以 .py 结尾的 Python 代码⽂件 都可以称为是⼀个模块。 2, 在模块中 别⼈书写好的功能(变量, 函数, 类)&#xff0c;我们可以拿来直接使⽤。 3, 我们自己写的代码文件&#xff0c; 想要作为模块让别⼈使⽤, 你的代码⽂件名(模块名) 满足标识符的规…

Linux驱动开发-03字符设备驱动框架搭建

一、字符设备驱动开发步骤 驱动模块的加载和卸载&#xff08;将驱动编译模块&#xff0c;insmod加载驱动运行&#xff09;字符设备注册与注销&#xff08;我们的驱动实际上是去操作底层的硬件&#xff0c;所以需要向系统注册一个设备&#xff0c;告诉Linux系统&#xff0c;我有…

JVM是如何创建一个对象的?

哈喽&#xff0c;大家好&#x1f389;&#xff0c;我是世杰。 本文我为大家介绍面试官经常考察的**「Java对象创建流程」** 照例在开头留一些面试考察内容~~ 面试连环call Java对象创建的流程是什么样?JVM执行new关键字时都有哪些操作?JVM在频繁创建对象时&#xff0c;如何…

Studying-代码随想录训练营day33| 动态规划理论基础、509.斐波那契函数、70.爬楼梯、746.使用最小花费爬楼梯

第33天&#xff0c;动态规划开始&#xff0c;新的算法&#x1f4aa;(ง •_•)ง&#xff0c;编程语言&#xff1a;C 目录 动态规划理论基础 动态规划的解题步骤 动态规划包含的问题 动态规划如何debug 509.斐波那契函数 70.爬楼梯 746.使用最小花费爬楼梯 总结 动态…