这个话题其实在上次分享<小程序填坑记里讲过了>已经讲过(大佬可绕过哦~
),但后来群里 /评论都有些同学,提到了一些疑问,问能否单独整理一篇更为详细的分享,讲解一下细节和完善提到的不足,如是有了下文👇。
这里是@IT·平头哥联盟,我是
首席填坑官
—苏南,用心分享 做有温度的攻城狮。 公 Z 号:honeyBadger8
,群:912594095
从我们接触前端起,第一个熟悉的存储相关的 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 了
*/
JSON.stringify
,
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;
}
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(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;
});
};
}
}
以上就是今天为大家总结的分享,您 GET 到了吗?小程序、sessionStorage、localStorage,都适用,做些许调整即可哦,希望今天的分享能给您带来些许成长,如果觉得不错,记得关注下方公众号哦,每周为您推最新分享👇👇。
作者:苏南 - 首席填坑官
链接: https://blog.csdn.net/weixin_43254766/article/details/83618630
交流群:912594095、公众号:honeyBadger8
本文原创,著作权归作者所有。商业转载请联系@IT·平头哥联盟
获得授权,非商业转载请注明原链接及出处。
1
southSu OP 清风舞明月,幽梦落花间。
一梦醒来,恍如隔世, 两眉间,相思尽染。——我是苏南,周三早安,愿您安好!😃 |
2
cctv1005s927 2018-11-07 08:22:15 +08:00
平头哥??
|
3
Showfom 2018-11-07 08:29:16 +08:00
|
4
MuscleOf2016 2018-11-07 08:34:43 +08:00
吓得我以为,江苏 苏南 苏北 内斗尼。哈哈。
|
5
des 2018-11-07 08:35:47 +08:00 via Android
平头哥??
|
6
lancegin 2018-11-07 08:49:51 +08:00 via iPhone
美凌格
|
7
farseeraliens 2018-11-07 09:42:26 +08:00 via iPhone
请问 set 后一直不 get 就没效果了吗?
|
8
cctv1005s927 2018-11-07 13:56:06 +08:00
@Showfom ??
|
9
southSu OP @cctv1005s927
不那么好过的日子里, 要学会每天给自己找一个开心的理由, 哪怕只是阳光很暖,电量很满!——下午好,感谢支持,我们是几个朋友一起弄的个团队写点博客而已,不是马老师的平头哥,欢迎关注哦 |
10
southSu OP @farseeraliens
每一个人都应该用努力去惊艳时光, 生活不会亏待任何一个努力的人!-——下午好,感谢支持,this.initRun();方法初始化会进行删除过期的数据,set 之后,肯定要 get 才能取到你要东西,localstorage 本身也是如此! |
11
southSu OP |
12
Showfom 2018-11-07 19:10:35 +08:00
@cctv1005s927 平头哥的来历啊
|