给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 相关文章推荐
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
vue生命周期实例小结
Aug 15 Javascript
移动端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
用libtemplate实现静态网页生成
2006/10/09 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
javascript 函数调用规则
2009/08/26 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
vue2.0模拟锚点的实例
2018/03/14 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
详解python深浅拷贝区别
2019/06/24 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
CNC数控操作工岗位职责
2013/11/19 职场文书
高级编程求职信模板
2014/02/16 职场文书
建议书怎么写
2014/03/12 职场文书
党员目标管理责任书
2014/07/25 职场文书
项目工作说明书
2014/07/29 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
入党积极分子考察意见
2015/06/02 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
python如何为list实现find方法
2022/05/30 Python