给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 相关文章推荐
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
移动端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
中国第一家无线电行
2021/03/01 无线电
PHP中文汉字验证码
2007/04/08 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
谈谈vue中mixin的一点理解
2017/12/12 Javascript
node中的session的具体使用
2018/09/14 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python实现爬取图书封面
2018/07/05 Python
python 以16进制打印输出的方法
2018/07/09 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
四查四看剖析材料
2014/02/14 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL