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。