Web Storage是HTML5提出的本地存储机制,主要目的是克服cookie的一些限制,当数据需要被严格控制在客户端上时,无需持续的将数据发回服务器。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空。
获取localStorage的大小。
let loc = window.localStorage;
var size;
console.log("这里直接打印即可看见大小", loc);
for (const key in loc) {
if (loc.hasOwnProperty.call(loc, key)) {
size = loc[key].length / 1024;
console.log("==========", loc[key].length / 1024, size > 10);
}
}
使用localstrong缓存到本地,并实时更新
created 页面初始化判断是否存在此key ‘trtcRecord’
try {
let tableDatas=JSON.parse(localStorage.getItem('trtcRecord'));
that.pagesTotal=tableDatas.length;
that.tableDatas=tableDatas.slice(0,5);
} catch (error) {
let trtcRecord = [];
localStorage.setItem("trtcRecord", JSON.stringify(trtcRecord));
}
mounted 里面监听变化
var that=this;
// 本地存储变化更新视图层的数据
//根据自己需要来监听对应的key
window.addEventListener("setItemEvent",function(e){
let loc = window.localStorage;
// console.log("这里直接打印即可看见大小", loc);
for (const key in loc) {
// 本地存储设置最多2M
// console.log('当前已用存储:' + (loc['trtcRecord'].length / 1024).toFixed(2) + 'KB');
let localSize=loc['trtcRecord'].length/1024
if(localSize>2*1024){
that.$message.warning('本地存储上限,将清空部分通话缓存');
let data=that.tableDatas.splice(0,50);
that.pagesTotal=data.length;
window.localStorage.setItem('trtcRecord',JSON.stringify(data));
// that.$route.replace('/');
}
}
})