首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >给localStorage添加过期时间的功能

给localStorage添加过期时间的功能

作者头像
JokerDJ
发布于 2023-11-27 07:11:34
发布于 2023-11-27 07:11:34
24500
代码可运行
举报
文章被收录于专栏:JokerDJJokerDJ
运行总次数:0
代码可运行
给localStorage添加过期时间的功能 定义一个工具函数Util,用localstorage来存储数据,且可以传入expires作为过期时间,如果已过期,get的时候清空该数据。

LocalStorage.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 function localset(key, val, expire) {
  var exp = expire ? Date.now() + expire * 1000 : -1;
  localStorage.setItem(key, JSON.stringify({value: val, expire: exp}));
  console.log('set ok', JSON.stringify({value: val, expire: exp}));
}

 function localget(key) {
  var data = localStorage.getItem(key);
  if (!data) return null;

  var dataObj = JSON.parse(data);

  if (dataObj.expire == -1) return dataObj.value;

  if (Date.now() >= dataObj.expire) {
    localStorage.removeItem(key);
    return null;
  } else {
    return dataObj.value;
  }
}

export {localset,localget}

使用测试

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//设置localStorage
 localset("user",JSON.stringify(this.users),1800);//设置key为user,值为json字符串,时间为30分钟
//获取localStorage 
 var user=JSON.parse(localget("user"));获取user;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-11-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
如何安全使用localStorage保护敏感数据
一直在localStorage中存储敏感数据,认为它既安全又方便?其实不然。一个错误就可能暴露一切:用户令牌、私钥等等。在localStorage中存储敏感数据就像把家门钥匙放在门垫下——容易获取,但随时可能引发灾难。
用户11764306
2025/08/09
500
localStorage简单封装设置失效时间
localStorage和cookie 的区别不详细对比,但是localStorage存储数据的时候有一点需要我们注意的。
日薪月亿
2019/05/14
2K0
[javascript] 使用localStorge模拟实现cookie
跨iframe页面,setCookie不起作用,所以迫使我使用localStorge模拟实现。
唯一Chat
2022/05/11
3930
运用惰性删除和定时删除实现可过期的localStorage缓存
使用localStorage可以在浏览器中存储键值对的数据。经常被和localStorage一并提及的是sessionStorage,它们都可以在当浏览器中存储键值对的数据。但是它们之间的区别是:存储在localStorage的数据可以长期保留;而当页面会话结束(也就是当页面被关闭)时,存储在sessionStorage的数据会被清除。
万猫学社
2022/04/22
1.5K0
JavaScript localStorage 的使用
在 HTML5 问世后,介绍了 Web Storage 的使用 — 可以将网页中的数据存储在用户的浏览器当中 — 也就是说可以在客户端存储数据。使用上的好处在于大部分浏览器都有支持、可以存储数据的容量大多有 5MB 以上、且数据存储和提取相对简单方便。
写bug的高哈哈
2025/01/19
2740
LocalStorage 设置过期时间?
以上问题都是日常开发中遇到的,所以有此记录,如果你有不同的解决方案,欢迎留言告诉哦,不同的思路带来不同的碰撞,哈哈。
执行上下文
2022/07/26
3.5K0
LocalStorage 设置过期时间?
tauri学习(2)-a链接伪类visited失效问题
接上节继续,在前端开发中,a链接常用a:visited伪类,用于区分链接点击过后的呈现效果。
菩提树下的杨过
2022/08/23
6040
tauri学习(2)-a链接伪类visited失效问题
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
JackJiang
2024/11/28
1500
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
localStorage和sessionStorage用法小总结
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
OECOM
2020/07/01
1.1K0
localStorage 的相关运用
localStorage 是浏览器自带的一个属性,只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除。
子舒
2023/08/23
3960
localStorage 的相关运用
VUE2.0 学习(十九)浏览器本地存储localStorage 和 sessionStorage
目录 localStorage sessionStorage 两者区别 localStorage <script type="text/javascript" > let p = {name:'张三',age:18} // 保存一个数据 function saveData(){ localStorage.setItem('msg','hello!!!') localStorage.setItem('msg2',666) localStorage.setItem('pe
一写代码就开心
2021/10/26
7130
【前端工具类】001-本地存储工具类:LocalStorageUtil
訾博ZiBo
2025/01/06
1020
js本地存储:localStorage
localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库
超级小可爱
2023/03/24
5.1K0
js本地存储:localStorage
LocalStorage存储JSON对象的问题[未测试]
(adsbygoogle = window.adsbygoogle || []).push({});
双面人
2019/04/10
1.7K0
一个比 Cookie 更好的本地存储方式 – HTML5 Web 存储
这些功能不需要长期保存,也不需要入数据库,所以有人可能会考虑使用 Cookie 去进行存储,但是 Cookie 中每条的存储空间为 4k,存储太多的数据时可能会出现存储空间不足的问题
沈唁
2018/12/25
2.1K1
PHP全栈学习笔记9
http最大特点是无连接无状态,clinet到http request到server,server到http response到clinet。
达达前端
2019/07/03
7320
PHP全栈学习笔记9
HTML5-本地存储与cookies
一、H5的几种存储形式 1、本地存储(localstorage和sessionstorage) 存储形式:key-->value 过期策略:localstorage永久存储,不过期,除非手动删除,sessionstorage在重启浏览器、关闭页面或新开页面时失效 大小限制:每个域名5M 使用方法:(localstorage与sessionstorage操作相同) getItem(读取)、setItem(设置)、removeItem(移除)、key(索引)、clear(清空) 存储内容:数组、json、图片、
小古哥
2018/03/08
1K0
vue浏览器缓存问题_vue兼容浏览器能兼容到几
localStorage -持久化的本地存储,除非主动删除数据,否则数据永远不会过期.
全栈程序员站长
2022/09/27
7640
HTML5规范的本地存储
在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database .   用来检查判断浏览器是否支持 Web Storage   if(window.localStorage){     //浏览器支持localStorage   }   if(window.sessionStorage){     //浏览器支持sessionStorage   } localStorage 主要作用是将数据保存在客户端中,也就是用户的计算机上。 是基于域的,
用户1197315
2018/01/19
2.5K0
面试官: 如何让localStorage支持过期时间设置?
聊到 localStorage 想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getItem, setItem, removeItem, clear 这几个 API 轻松的对存储在浏览器本地的数据进行读,写, 删操作, 但是相比于 cookie, localStorage 唯一美中不足的就是不能设置每一个键的过期时间。
徐小夕
2021/12/13
5.7K0
面试官: 如何让localStorage支持过期时间设置?
相关推荐
如何安全使用localStorage保护敏感数据
更多 >
LV.1
写逸网络Java开发工程师
作者相关精选
换一批
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档