Web Storage API: 本地儲存和會話儲存 | Tech Wiki Online

Web Storage API: 本地儲存和會話儲存

Web Storage API 提供了一種在瀏覽器中儲存數據的方式。它定義了兩種非常重要的儲存機制：會話儲存和本地儲存，它們是 Web 平台上提供的一套儲存選項的一部分。

• 介紹
• 如何訪問儲存
• 方法
  • setItem(key, value)
  • getItem(key)
  • removeItem(key)
  • key(n)
  • clear()
• 儲存大小限制
  • 桌面
  • 移動設備
  • 超過配額
• 開發者工具
  • Chrome
  • Firefox
  • Safari

介紹

Web Storage API 定義了兩種非常重要的儲存機制：會話儲存和本地儲存。

它們是 Web 平台上提供的一套儲存選項的一部分，包括：

• Cookies
• IndexedDB
• 緩存 API

Application Cache 已被棄用，Web SQL 在 Firefox、Edge 和 IE 中沒有實現。

會話儲存和本地儲存提供了一個私有區域來存儲數據。您存儲的任何數據都無法被其他網站訪問。

會話儲存在頁面會話的期間保持存儲的數據。如果多個窗口或選項卡訪問同一個網站，它們會有兩個不同的會話儲存實例。

當一個選項卡/窗口關閉時，該選項卡/窗口的會話儲存將被清除。

會話儲存旨在允許在同一個網站上獨立處理不同的進程，這在 cookie 中是不可能的，因為它們在所有會話中共享。

相反，本地儲存會保存數據直到它被明確刪除，無論是您還是用戶刪除。它不會自動清理，並且在所有訪問網站的會話中共享。

本地儲存和會話儲存都是協議特定的：在使用 http 訪問頁面時存儲的數據在使用 https 服務頁面時不能訪問，反之亦然。

網絡儲存只能在瀏覽器中訪問，不像 cookie 那樣發送到服務器。

如何訪問儲存

本地和會話儲存都可以在 window 對象上使用 sessionStorage 和 localStorage 進行訪問。

它們的屬性和方法集完全相同，因為它們返回的是同一個對象，即 Storage 對象。

Storage 對象有一個屬性，length，它表示存儲其中的數據項的數量。

方法

setItem(key, value)

setItem() 將一個項目添加到儲存中。接受一個字符串作為鍵，一個字符串作為值：

localStorage.setItem('username', 'flaviocopes')
localStorage.setItem('id', '123')

如果傳遞的值不是字符串，它將被轉換為字符串：

localStorage.setItem('test', 123) // 以字符串 '123' 儲存
localStorage.setItem('test', { test: 1 }) // 以字符串 "[object Object]" 儲存

getItem(key)

getItem() 是從儲存中檢索字符串值的方法，使用存儲它的鍵字符串：

localStorage.getItem('username') // 'flaviocopes'
localStorage.getItem('id') // '123'

removeItem(key)

removeItem() 從儲存中刪除由 key 標識的項目，不返回任何值（一個 undefined 值）：

localStorage.removeItem('id')

key(n)

您存儲的每個項目都有一個索引號。

看起來這個數字是連續的，因此第一次使用 setItem() 時，可以使用 key(0) 引用該項目，下一次使用 key(1) 引用下一個項目，依此類推，但實際上並不是。根據 MDN 的說法，“鍵的順序是由用戶代理定義的，所以您不應該依賴它”。

如果引用了一個不指向儲存項目的數字，它將返回 null。

clear()

clear() 會將您正在操作的儲存對象中的所有內容清除：

localStorage.setItem('a', 'a')
localStorage.setItem('b', 'b')
localStorage.length // 2
localStorage.clear()
localStorage.length // 0

儲存大小限制

通過儲存 API，您可以儲存比使用 cookies 更多的數據。

Web 上可用的儲存空間大小可能因儲存類型（本地或會話）、瀏覽器和設備類型而異。html5rocks.com 的一項研究指出了這些限制：

桌面

• Chrome、IE、Firefox：10MB
• Safari：本地儲存 5MB，會話儲存無限

移動設備

• Chrome、Firefox：10MB
• iOS Safari 和 WebView：本地儲存 5MB，除了 iOS 6 和 iOS 7，它們的會話儲存為 5MB
• Android 瀏覽器：本地儲存 2MB，會話儲存無限

超過配額

如果您存儲了大量數據，您需要處理配額錯誤。您可以使用 try/catch 來處理它：

try {
  localStorage.setItem('key', 'value')
} catch (domException) {
  if (['QuotaExceededError', 'NS_ERROR_DOM_QUOTA_REACHED'].includes(domException.name)) {
    // 處理配額限制超過的錯誤
  }
}

開發者工具

各大瀏覽器的開發者工具都提供了一個很好的界面來檢查和操作本地和會話儲存中的數據。

Chrome

Firefox

Safari

tags: [“Web Storage”, “local storage”, “session storage”, “API”, “browser storage”]