给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里的条件判断
Feb 27 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
在Vue中使用HOC模式的实现
Aug 23 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
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php MySQL与分页效率
2008/06/04 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
2016/08/16 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
使用python实现ftp的文件读写方法
2019/07/02 Python
python变量命名的7条建议
2019/07/04 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
法制报告会主持词
2014/04/02 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
单位工作证明书格式
2014/10/04 职场文书
学习型家庭事迹材料
2014/12/20 职场文书