如何封装一个 localStorage,保证数据的时效性
localStorage
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。
localStorage 是 HTML5 本地存储的 API ,使用键值对的方式进行存储数据,存取的数据只能是字符串。
存储方式:以键值对的方式存储字符串
主要应用:购物车、客户登录、游戏存档等
可存储的数据类型:数组,图片,json,样式,脚本等(只要能序列化成字符串的内容都可以存储)
localStorage 的好处就是,存储空间大,长时间保存,不好的地方就是永久有效,除非手动清除。所以如果有数据时效性的需求,就需要自己来处理下,可以和数据一起存一个 expires 时间戳。
let timeLocalStorage = {
set:function(key,value,expires){
let data = {value,expires:Date.now()+new Date(expires).getTime()};
localStorage.setItem(key,JSON.stringify(data));
},
get:function(key){
let data = JSON.parse(localStorage.getItem(key));
if(data){
if(data.expires && Date.now() - data.expires > 0){
console.log('数据已过期');
localStorage.removeItem(key);
}else{
return data.value;
}
}
return null;
},
removeItem:function(key){
localStorage.removeItem(key);
}
}