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中Color的一些特性介绍
May 27 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
详解CSS故障艺术
May 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
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Python shelve模块实现解析
2019/08/28 Python
python函数不定长参数使用方法解析
2019/12/14 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
校长竞聘演讲稿
2014/05/16 职场文书
PyTorch中permute的使用方法
2022/04/26 Python
Python 中面向接口编程
2022/05/20 Python