一、原因
在使用sessionStorage做缓存处理时,报了如上的错误提示,经查是sessionStorage对大小是有限制的,所以要进行try catch,500KB左右的东西保存起来就会令到Resources变卡,2M左右就可以令到Resources卡死,操作不了,5M就到了Chrome的极限,而超过之后就会抛出上述异常。
二、快速解决
F12 选择服务器地址,右键清楚。注意:这种方式治标不治本,后面依旧会有问题
。
三、彻底解决
参考:window.localStorage.setItem() 缓存超额
addSessionStorage (key, storeObj) {
//定义一个前缀,表示只删除自己定义的缓存
const cachePrefix = 'SERVICE_QR_';
try {
sessionStorage.setItem(cachePrefix + key, JSON.stringify(storeObj));
} catch (e) {
// sessionStorage容量不够,根据保存的时间删除已缓存到 sessionStorage
if (e.name.toUpperCase().indexOf('QUOTA') >= 0) {
let item;
const tempArr = [];
// 先把所有的缓存对象来出来,放到 tempArr 里
for (item in sessionStorage) {
if (item.indexOf(cachePrefix) === 0) {
tempArr.push(JSON.parse(sessionStorage[item]));
}
}
// 如果有缓存对象
if (tempArr.length) {
// 按缓存时间升序排列数组
tempArr.sort((a, b) => a.stamp - b.stamp);
// 删除缓存时间最早的
sessionStorage.removeItem(tempArr[0].key);
// 删除后在再添加,利用递归完成
this.addSessionStorage(key, storeObj);
}
}
}
},