给localStorage设置一个过期时间的方法分享


Posted in Javascript onNovember 06, 2018

思考点

在 web 开发中,我们知道 cookie、session、localStorage都可以保存用户的数据,cookie的 domain、path 限制了 cookie 的跨域, 有数量和大小的限制,可以设置有效时间。 session是后台在浏览器注入一个设置了 httponly 的不可读取的 cookie , session data由后台保存在数据库或者内存中,在web中,session 是靠 cookie 作为唯一标示来实现的,也可以设置过期时间。 localStorage 是 H5 的数据存储办法, 也是有大小限制的,但是不可以设置过期时间。

从我们接触前端起,第一个熟悉的存储相关的Cookie或者来分析我们生活中密切相关的淘宝、物流、闹钟等事物来说起吧,

  • Cookie从你设置的时候,就会给个时间,不设置默认会话结束就过期;
  • 淘宝购物 从你下单付款起,就会给这件货物设置一个收货期限时间,过了这个时间自动认为你收货(即订单结束);
  • 闹钟 你设置的提醒时间,其实也就是它的过期时间;
  • 再比如与您每天切身相关的产品需求,过完需求,你给出的上线时间,也就是这个需求的过期时间;
  • 再通俗点讲,您今年的生日过完到明年生日之间也是相当于设置了有效期时间;

以上种种,我们能得出一个结论任何一件事、一个行为动作,都有一个时间、一个节点,甚至我们可以黑localStorage,就是一个完善的API,为什么不能给一个设置过期的机制,因为sessionStorage、Cookie并不能满足我们实际的需求。

实现思路

抱歉,黑localStorage不完善,有点夸张了,综合上述的总结,问题就简单了,给localStorage一个过期时间,一切就都so easy ?到底是不是,来看看具体的实现吧:

简单回顾

//示例一:
localStorage.setItem('test',1234567);
let test = localStorage.getItem('test');
console.log(typeof test, test);

//示例二:
localStorage['name'] = '苏南';
console.log(localStorage['name']);
/*
输出:
"1234567" ,'苏南',
这里要注意,1234567 存进去时是number 取出来就成string了
*/

重写 set(存入) 方法:

  • 首先有三个参数 key、value、expired ,分别对应 键、值、过期时间,
  • 过期时间的单位可以自由发挥,小时、分钟、天都可以,
  • 注意点:存储的值可能是数组/对象,不能直接存储,需要转换 JSON.stringify,
  • 这个时间如何设置呢?在这个值存入的时候在键(key)的基础上扩展一个字段,如:key+'expires',而它的值为当前 时间戳 + expired过期时间

具体来看一下代码 :

set(key, value, expired) {
 /*
 * set 存储方法
 * @ param {String} key 键
 * @ param {String} value 值,
 * @ param {String} expired 过期时间,以分钟为单位,非必须
 * @ 由@IT·平头哥联盟-首席填坑官∙苏南 分享
 */
 let source = this.source;
 source[key] = JSON.stringify(value);
 if (expired){
 source[`${key}__expires__`] = Date.now() + 1000*60*expired
 };
 return value;
}

重写 get(获取) 方法:

  • 获取数据时,先判断之前存储的时间有效期,与当前的时间进行对比;
  • 但存储时expired为非必须参数,所以默认为当前时间+1,即长期有效;
  • 如果存储时有设置过期时间,且在获取的时候发现已经小于当前时间戳,则执行删除操作,并返回空值;
  • 注意点:存储的值可能是数组/对象,取出后不能直接返回,需要转换 JSON.parse,

具体来看一下代码 :

get(key) {
 /*
 * get 获取方法
 * @ param {String} key 键
 * @ param {String} expired 存储时为非必须字段,所以有可能取不到,默认为 Date.now+1
 * @ 由@IT·平头哥联盟-首席填坑官∙苏南 分享
 */
 const source = this.source,
 expired = source[`${key}__expires__`]||Date.now+1;
 const now = Date.now();

 if ( now >= expired ) {
 this.remove(key);
 return;
 }
 const value = source[key] ? JSON.parse(source[key]) : source[key];
 return value;
}

重写 remove(删除) 方法:

删除操作就简单了,;

remove(key) {
 const data = this.source,
 value = data[key];
 delete data[key];
 delete data[`${key}__expires__`];
 return value;
}

优化点:

  • 记得上次有个同学,是这么评论的:「 删除缓存能放到constructor里面执行么,放到get里面 不取就一直在那是不是不太好?」;
  • 为什么不用for in而是 for ? for in循环遍历对象的属性时,原型链上的所有属性都将被访问,解决方案:使用hasOwnProperty方法过滤或Object.keys会返回自身可枚举属性组成的数组;
class storage {

 constructor(props) {
 this.props = props || {}
 this.source = this.props.source || window.localStorage
 this.initRun();
 }
 initRun(){
 /*
 * set 存储方法
 * @ param {String} key 键
 * @ param {String} value 值,存储的值可能是数组/对象,不能直接存储,需要转换 JSON.stringify
 * @ param {String} expired 过期时间,以分钟为单位
 * @ 由@IT·平头哥联盟-首席填坑官∙苏南 分享
 */
 const reg = new RegExp("__expires__");
 let data = this.source;
 let list = Object.keys(data);
 if(list.length > 0){
 list.map((key,v)=>{
 if( !reg.test(key )){
  let now = Date.now();
  let expires = data[`${key}__expires__`]||Date.now+1;
  if (now >= expires ) {
  this.remove(key);
  };
 };
 return key;
 });
 };
 }
}

总结:

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
js生成随机数的过程解析
Nov 24 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 #Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 #Javascript
vue项目上传Github预览的实现示例
Nov 06 #Javascript
React Component存在的几种形式详解
Nov 06 #Javascript
支付宝小程序tabbar底部导航
Nov 06 #Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 #Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 #Javascript
You might like
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php Session存储到Redis的方法
2013/11/04 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python实现FTP服务器服务的方法
2017/04/11 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python决策树分类算法学习
2017/12/22 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python守护进程实现过程详解
2020/02/10 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
企业业务员岗位职责
2014/03/14 职场文书
大班开学家长寄语
2014/04/04 职场文书
论文评语大全
2014/04/29 职场文书
鼓舞士气的口号
2014/06/16 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
入党函调证明材料
2015/06/19 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python