localStorage 和 sessionStorage 儲存大小限制

儲存大小限制

localStorage 和 sessionStorage 儲存大小通常限制在 5MB ~ 10MB，最常見的限制是 5MB，不同瀏覽器限制大小不同。

以下是一些較新瀏覽器和版本的 Web Storage 儲存空間大小限制：

Google Chrome：約為 5MB 至 10MB，視瀏覽器版本而定。
Mozilla Firefox：約為 10MB，視瀏覽器版本而定。
Safari：約為 5MB 至 10MB，視瀏覽器版本而定。
Microsoft Edge：約為 10MB，視瀏覽器版本而定。

注意：瀏覽器版本可能會對儲存空間大小限制進行更改，因此這些限制僅供參考。

瀏覽器儲存限制大小檢查的方法一

以下是一個示範如何檢查當前瀏覽器的儲存限制大小的方法：

// 檢查 localStorage 儲存限制大小
var limit = 1024 * 1024 * 10; // 10MB
try {
  localStorage.setItem('test', new Array(limit).join('0'));
  localStorage.removeItem('test');
} catch (e) {
  limit = e.toString().match(/\d+/)[0] || 5 * 1024 * 1024; // 5MB
}
console.log('localStorage limit:', limit, 'bytes');

// 檢查 sessionStorage 儲存限制大小
try {
  sessionStorage.setItem('test', '1');
  sessionStorage.removeItem('test');
} catch (e) {
  limit = e.toString().match(/\d+/)[0] || 5 * 1024 * 1024; // 5MB
}
console.log('sessionStorage limit:', limit, 'bytes');

上方程式會嘗試向 localStorage 和 sessionStorage 中存儲數據，如果存儲失敗，代表超過了該瀏覽器的儲存限制大小，此時可以從錯誤訊息中獲取瀏覽器的儲存限制大小。如果沒有獲取到，就預設使用 5MB 作為儲存限制大小。

瀏覽器儲存限制大小檢查的方法二

第二種檢查當前瀏覽器的儲存限制大小的方法：

// 檢查 localStorage 儲存限制大小
if ('localStorage' in window && window['localStorage'] !== null) {
  var limit = (1024 * 1024 * 5); // 5 MB
  try {
    localStorage.setItem('test', '1');
    localStorage.removeItem('test');
  } catch(e) {
    limit = e.QUOTA_EXCEEDED_ERR;
  }
  console.log('localStorage limit: ' + limit + ' bytes');
}

// 檢查 sessionStorage 儲存限制大小
if ('sessionStorage' in window && window['sessionStorage'] !== null) {
  var limit = (1024 * 1024 * 5); // 5 MB
  try {
    sessionStorage.setItem('test', '1');
    sessionStorage.removeItem('test');
  } catch(e) {
    limit = e.QUOTA_EXCEEDED_ERR;
  }
  console.log('sessionStorage limit: ' + limit + ' bytes');
}

上方程式會先檢查當前瀏覽器是否支援 localStorage 和 sessionStorage，如果支援則嘗試設置一個 Key-Value Pair 並刪除它，以確定儲存空間是否已滿。

如果儲存空間已滿，則會拋出 QUOTA_EXCEEDED_ERR 錯誤，代表超出了儲存限制大小。此時可以透過 e.QUOTA_EXCEEDED_ERR 屬性值來取得當前瀏覽器的儲存限制大小。注意不同瀏覽器和版本儲存限制大小可能會有所不同，需要在不同的環境下進行測試。

Note: Key-Value Pair（鍵值對）是一種資料結構，用來儲存一個鍵（key）和對應的值（value）。在 JavaScript 中，鍵值對可以透過物件（Object）或 Map 結構來實現。以物件為例，鍵是一個唯一的字串，值可以是任何資料型態，例如數字、字串、陣列、物件等。在使用 Web Storage API 的 localStorage 或 sessionStorage 時，鍵值對即是用來儲存資料的基本單位。