localStorage 设置过期时间的方法实现


Posted in HTML / CSS onDecember 21, 2018

localStorage除非人为手动清除,否则会一直存放在浏览器中,但是很多情况下我们可能需要localStorage有一个过期时间,比如我们将用户身份认证 token 保存在客户端,1周之内有效,超过一周则要重新登录,那么这种需求该怎么实现呢

要知道,localStorage本身并没有提供过期机制,既然如此,那就只能我们自己来实现了,我们可以直接给其原型上加上这样一个方法

Storage.prototype.setExpire=(key,value,expire) =>{
 };
Storage.setExpire(key,value,expire);

要过期就必须要记录时间,我们的思路是,设置值得时候就将当前时间记录进去,然后获取值得时候判断一下当前时间和之前的时间差是否在某个范围之内,若果超出范围,则清空当前项,并返回null

要将时间加入到值中就必须要定义一个格式

Storage.prototype.setExpire=(key, value, expire) =>{
    let obj={
        data:value,
        time:Date.now(),
        expire:expire
    };
    localStorage.setItem(key,JSON.stringify(obj));
}

包括下面3个字段

  • data 实际的值
  • time 当前时间戳
  • expire 过期时间

因为localStorage 设置的值不能为对象, 所以这里使用了 JSON.stringify 方法将其转为字符串,最终在使用的时候得转回来。

接着我们添加一个获取的方法

Storage.prototype.getExpire= key =>{
    let val =localStorage.getItem(key);
    if(!val){
        return val;
    }
    val =JSON.parse(val);
    if(Date.now()-val.time>val.expire){
        localStorage.removeItem(key);
        return null;
    }
    return val.data;
}

我们可以先测试一下

localStorage.setExpire("token",'xxxxxx',5000);
window.setInterval(()=>{
    console.log(localStorage.getExpire("token"));
},1000)

本质上我们的思路并非是要定时去清理过期的项,而是在获取的时候判断是否过期,如果过期再去清除该项。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
css3 background属性调整增强介绍
Dec 18 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 #HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 #HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 #HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 #HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 #HTML / CSS
HTML5文档结构标签
Apr 21 #HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 #HTML / CSS
You might like
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
prototype1.4中文手册
2006/09/22 Javascript
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
Vue中props的使用详解
2018/06/15 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
解决Layui中layer报错的问题
2019/09/03 Javascript
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
普通员工辞职信
2014/01/17 职场文书
成立公司计划书
2014/05/07 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
民事起诉书范本
2015/05/19 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers