localStorage 的大小限制测试以及其他知识梳理

大小限制

业界主流是 5 MB，但每个浏览器各自又有些不同。

经过我的实验，chrome 78 版限制 5MB，而 safari 13.0.2 限制 2.5MB。一旦超过控制台会报错

// safari 报错
QuotaExceededError: The quota has been exceeded.


// chrome 报错
Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'test5' exceeded the quota.

测试代码如下，可以 1MB，1MB 的往上加。

var array = new Array(1024*1024);
array.fill('1');
var str = array.join('');
window.localStorage.setItem('test1', str);

作用域

协议名+主机名+端口名 都必须相同才能共享 localStorage，比方说 a.google.com 与 b.google.com，主机名不相同，不能共享。这点与 cookie 不同。

此外提一句，sessionStorage 更加严格，还需要同一窗口（就是浏览器的标签页）。

生存期

copy by localstorage 必知必会

localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空

若希望能到期自删，那自己魔改一下 set/getItem 函数，变量值加入过期时间吧。