目录
前言
最近在项目中遇到后端一次性返回给前端超过5Mb的数据,前端在多个页面展示这些数据,就涉及到了多页面数据传递,之前数据量小采用了window.localstorage没问题,后面发现localstorage存储上限,setItem无法设置缓存,需要调整后端接口以及前端逻辑,或是采用存储上限更高的方案,百度得知前端可使用indexDB进行大数据量存储,后面研究一下看能否解决问题。
浏览器localstorage最大存储限制测试
(function() {
if(!window.localStorage) {
console.log('当前浏览器不支持localStorage!')
}
var test = '0123456789';
var add = function(num) {
num += num;
if(num.length == 10240) {
test = num;
return;
}
add(num);
}
add(test);
var sum = test;
var show = setInterval(function(){
sum += test;
try {
window.localStorage.removeItem('test');
window.localStorage.setItem('test', sum);
console.log(sum.length / 1024 + 'KB');
} catch(e) {
alert(sum.length / 1024 + 'KB超出最大限制');
clearInterval(show);
}
}, 20)
})()
将这段代码直接粘贴到浏览器控制台执行即可.
使用edge浏览器执行结果如下:
可以看到,edge浏览器最大存储限制为 5120kb,即5Mb.