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 函數，變量值加入過期時間吧。