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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
新手简单了解vue
2019/05/29 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
JS访问对象两种方式区别解析
2020/08/29 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
django有哪些好处和优点
2020/09/01 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
土木工程应届生自荐信
2013/09/24 职场文书
认识深刻的检讨书
2014/02/16 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
详解Python为什么不用设计模式
2021/06/24 Python