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学习系列之移动属性详解
Jul 04 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
CSS3 实现的加载动画
Dec 07 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 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
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
PHP生成树的方法
2015/07/28 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
Element Input组件分析小结
2018/10/11 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
python如何写try语句
2020/07/14 Python
Python 在局部变量域中执行代码
2020/08/07 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
服装机修工岗位职责
2013/12/26 职场文书
我的长生果教学反思
2014/04/28 职场文书
保险专业求职信
2014/07/07 职场文书
暑期培训班策划方案
2014/08/26 职场文书
中学生自我评价范文
2015/03/03 职场文书
老人院义工活动感想
2015/08/07 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript