前端缓存Cookie、LocalStorage、SessionStorage 根据业务场景不同来选择使用
老生常谈的对比来说:
Cookie: 存储量小。
SessionStorage:存储周期仅仅到浏览器关闭,存储量是够了,用起来也真是够了,无法多个Tab页共享。局限性也很大。
LocalStorage::存储量和存储周期都够用了,但是有些业务场景就是不想永久保存就很尴尬。
要么找现成的类库处理,要么手写一个,分享一个之前工作中的一次封装,直接上代码
class Store {
constructor(key) {
this.key = 'store';
}
// 存储
setItem(params) {
let initObj = {
key: '', // 存储的key
value: '', // 存储的值
validity: null, // 过期时间 单位:毫秒
start: new Date().getTime() // 记录什么时候存储的
}
let options = {};
// 合并、并处理参数
Object.assign(options, initObj, params);
localStorage.setItem(options.key, JSON.stringify(options));
}
// 取值
getItem(key) {
let options = localStorage.getItem(key);
// 设置了过期时间
if ( options.validity && options.validity > 0 ) {
const date = new Date().getTime();
// 判断是否超时
if ( date - options.start > options.validity ) {
// 缓存过期,清除缓存,返回false
localStorage.removeItem(key);
return false;
} else {
// 存储还没到时间
return options.value;
}
} else {
// 如果没有设置失效时间,直接返回值
return options.value;
}
}
// 对外暴露移出缓存方法
removeItem(key){
localStorage.removeItem(key);
}
}