[JS] localStorage 上限與 Catch Error


localStorage 好用且方便,但其容量雖大仍有大小的限制,並且會根據瀏覽器、使用者設定的不同而有差異。

透過 Test of localStorage limits/quota 此網站會持續在本地塞資料直到塞不下為止,透過此方式可以測試每個瀏覽器的預設容量:

Chrome 77 – 5200k
Safari 12 – 2600k
Firefox 67 – 5200k

考量到跨平台,考量到跨平台,存入的資料盡量要在 2.6M 以下。

而如何知道目前的 localStorage 儲存了多少資料?目前還沒找到比較有效率的方式或 API,只能土法煉鋼地將資料一個個取出來加總得到大約的數值。請參考:How to find the size of localStorage

另外在 setItem 時,如果容量已經滿了,可以利用 try ... catch ... 捕捉到錯誤,但錯誤名稱也因瀏覽器而略有不同,如 Chrome 為 QuotaExceededError、Safari 為 QUOTA_EXCEEDED_ERR。請參考 Dealing with localStorage errors

延伸閱讀:Working with quota on mobile browsers


發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *