他们都是存储客户端临时信息的对象,只能存储字符串类型的对象,存放数据大小一般为5MB。,不同浏览器无法共享他们的信息,但相同浏览器的不同页面可以共享相同的localStorage
(页面属于相同域名和端口),不同的页面或标签无法共享sessionStorage
的信息。
localStorage(本地存储)
localStorage
生命周期是永久,如果不清除这些信息将永远存在。
方法
// 存储
localStorage.setItem(id, string);
// 取
localStorage.getItem(id);
// 删除
localStorage.remove(id);
// 清空
localStorage.clear();
localStorege的定时清除
对比起来,localStorage比sessionStorage更能满足长期存储需求,但其长久存在的特性容易造成存储废弃数据过多,且容易造成不必要的误会,所以我们可以对localStorage进行定时清除。由于其本身没有定时清除的方法,所以我们只能自己写。
思路:将存储数据、存储时间、过期时间转换成字符串一起存储,当获取数据时判断数据是否过期,如果没有过期就成功获取,过期则清除该项。
代码
// 定义储存的方法
Storage.prototype.setExpire=(key, value, expire) => {
const object={
data: value,
time: Date.now(), //当前时间戳
expire:expire // 过期时间
};
localStorage.setItem(key, JSON.stringify(object));
}
// 定义获取的方法
Storage.prototype.getExpire=key => {
let val = localStorage.getItem(key);
if (!val) {
return val;
}
val = JSON.parse(val);
if (Date.now() - val.time > val.expire) {
localStorage.remove(key);
return null;
}
return val.data;
}
使用定义的方法:
// 存储
localStorage.setExpire('token', 'xxxxxx', 5000);
// 取
localStorage.getExpire('token');
sessionStorage(会话存储)
sessionStorage
生命周期为当前窗口或标签,一旦窗口或标签被关闭,信息就会被清空
方法
// 存储
sessionStorage.setItem(id, string);
// 取
sessionStorage.getItem(id);
// 删除
sessionStorage.remove(id);
// 清空
sessionStorage.clear();
// 计算长度
sessionStorage.length();
我更喜欢sessionStorage结合vuex,保证页面刷新store里的数据仍然存在
// 在刷新前将vuex里的数据保存在sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state));
})
// 页面加载时读取sessionStorage里的状态
if (sessionStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
}