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

给localStorage添加过期时间的功能

作者头像
JokerDJ
发布于 2023-11-27 07:11:34
发布于 2023-11-27 07:11:34
23400
代码可运行
举报
文章被收录于专栏: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一并提及的是sessionStorage,它们都可以在当浏览器中存储键值对的数据。但是它们之间的区别是:存储在localStorage的数据可以长期保留;而当页面会话结束(也就是当页面被关闭)时,存储在sessionStorage的数据会被清除。
万猫学社
2022/04/22
1.4K0
面试官: 如何让localStorage支持过期时间设置?
聊到 localStorage 想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getItem, setItem, removeItem, clear 这几个 API 轻松的对存储在浏览器本地的数据进行读,写, 删操作, 但是相比于 cookie, localStorage 唯一美中不足的就是不能设置每一个键的过期时间。
徐小夕
2021/12/13
5.6K0
面试官: 如何让localStorage支持过期时间设置?
localStorage简单封装设置失效时间
localStorage和cookie 的区别不详细对比,但是localStorage存储数据的时候有一点需要我们注意的。
日薪月亿
2019/05/14
2K0
HTML5-本地存储与cookies
一、H5的几种存储形式 1、本地存储(localstorage和sessionstorage) 存储形式:key-->value 过期策略:localstorage永久存储,不过期,除非手动删除,sessionstorage在重启浏览器、关闭页面或新开页面时失效 大小限制:每个域名5M 使用方法:(localstorage与sessionstorage操作相同) getItem(读取)、setItem(设置)、removeItem(移除)、key(索引)、clear(清空) 存储内容:数组、json、图片、
小古哥
2018/03/08
1K0
localstorage跟sessionstorage
能查到证明有人指引,直接上代码 <script type="text/javascript"> function cunchu1(){ var arr = [ 1, 2, 3 ]; localStorage.setItem("temp", arr); //存入 参数: 1.调用的值 2.所要存入的数据 console.log(localStorage.getItem("temp"));//输出 }
陈灬大灬海
2018/09/12
9820
js本地存储:localStorage
localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库
超级小可爱
2023/03/24
5K0
js本地存储:localStorage
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
JackJiang
2024/11/28
1090
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
[javascript] 使用localStorge模拟实现cookie
跨iframe页面,setCookie不起作用,所以迫使我使用localStorge模拟实现。
唯一Chat
2022/05/11
3820
LocalStorage 设置过期时间?
以上问题都是日常开发中遇到的,所以有此记录,如果你有不同的解决方案,欢迎留言告诉哦,不同的思路带来不同的碰撞,哈哈。
执行上下文
2022/07/26
3.4K0
LocalStorage 设置过期时间?
Vue localStorage使用
localStorage #1 环境 "vue": "^2.5.2", "axios": "^0.19.0", "vue-axios": "^2.1.4", "vue-router": "^3.0.1" #2 使用 localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。 sessionStorage默认的有效期是浏览器的会话时间(也就是说标签页关闭后就消失了)。 localStorage作用域是协议、主机名、端口。(理论
Autooooooo
2020/11/09
8850
Vue localStorage使用
如何给localStorage设置一个过期时间?
点击上方'IT平头哥联盟'关注与您一起成长~ 用心分享 做有温度的攻城狮 引言   这个话题其实在上次分享<小程序填坑记里讲过了>已经讲过(大佬可绕过哦~),但后来群里/评论都有些同学,提到了一些疑问
苏南
2020/12/16
9750
如何给localStorage设置一个过期时间?
localStorage 的相关运用
localStorage 是浏览器自带的一个属性,只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除。
子舒
2023/08/23
3590
localStorage 的相关运用
localstorage本地存储的方法
通常我们把用户信息存储到仓库中时,刷新后信息会丢失。一般还会再存储到本地。 方法如下: 其中Profile是用户信息类型注解 import {Profile} from '@/types/user' const key = 'my_key' // 存储用户信息 export const setUserInfo = (userInfo: Profile) => { localStorage.setItem(key, JSON.stringify(userInfo)) } // 获取用户信息 export
且陶陶
2023/04/12
6520
LocalStorage与SessionStorage
localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案
WindRunnerMax
2020/08/27
6530
HTML5规范的本地存储
在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database .   用来检查判断浏览器是否支持 Web Storage   if(window.localStorage){     //浏览器支持localStorage   }   if(window.sessionStorage){     //浏览器支持sessionStorage   } localStorage 主要作用是将数据保存在客户端中,也就是用户的计算机上。 是基于域的,
用户1197315
2018/01/19
2.4K0
vue浏览器缓存问题_vue兼容浏览器能兼容到几
localStorage -持久化的本地存储,除非主动删除数据,否则数据永远不会过期.
全栈程序员站长
2022/09/27
7390
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
7010
vue中使用localStorage存储信息
对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage
py3study
2021/03/15
3.2K0
HTML5触摸界面设计与开发 读书笔记
第四章 创建缓存层 //内存层 var memoryCache={}; var CACHE_TTL=864000000; var CACHE_PREFIX="ti
lilugirl
2019/05/26
9420
LocalStorage存储JSON对象的问题[未测试]
(adsbygoogle = window.adsbygoogle || []).push({});
双面人
2019/04/10
1.7K0
相关推荐
运用惰性删除和定时删除实现可过期的localStorage缓存
更多 >
LV.1
写逸网络Java开发工程师
作者相关精选
换一批
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档