Web Storage API

概念與用法

Web 儲存中的兩種機制如下：

• sessionStorage 按瀏覽器選項卡和 源 進行分割槽。主文件以及所有嵌入的 瀏覽上下文 (iframe) 按其源進行分組，每個源都有權訪問其自己的獨立儲存區域。關閉瀏覽器選項卡會銷燬與該選項卡相關的所有 sessionStorage 資料。
• localStorage 僅按 源 進行分割槽。同一源的所有文件都可以訪問同一個 localStorage 區域，並且即使瀏覽器關閉後再重新開啟，該資料也會保留。

這些機制可以透過 Window.sessionStorage 和 Window.localStorage 屬性訪問。訪問其中任何一個都會返回一個 Storage 物件的例項，透過該物件可以設定、檢索和刪除資料項。每個源的 sessionStorage 和 localStorage 使用不同的儲存物件 — 它們獨立執行和控制。

要了解透過 API 可用的儲存量以及超出儲存限制時會發生什麼，請參閱 儲存配額和清除標準。

Web 儲存中的 sessionStorage 和 localStorage 都是同步的。這意味著當從這些儲存機制設定、檢索或刪除資料時，操作是同步執行的，會阻塞其他 JavaScript 程式碼的執行，直到操作完成。這種同步行為可能會影響 Web 應用程式的效能，尤其是在儲存或檢索大量資料時。

開發人員在對涉及大量資料或計算密集型任務的 sessionStorage 或 localStorage 執行操作時應謹慎。最佳化程式碼並最大限度地減少同步操作以避免阻塞使用者介面並導致應用程式響應延遲非常重要。

對於效能是關鍵或需要處理更大資料集的情況，可能更適合使用非同步替代方案，例如 IndexedDB。這些替代方案允許非阻塞操作，從而實現更流暢的使用者體驗和 Web 應用程式更好的效能。

確定第三方儲存訪問

每個源都有自己的儲存 — 這對 Web 儲存和 共享儲存 都適用。但是，第三方（即嵌入的）程式碼對共享儲存的訪問取決於其 瀏覽上下文。第三方程式碼執行的上下文決定了該第三方程式碼的儲存訪問許可權。

可以透過注入 <script> 元素或將 <iframe> 的源設定為包含第三方程式碼的網站來將第三方程式碼新增到其他網站。用於整合第三方程式碼的方法決定了該程式碼的瀏覽上下文。

• 如果您的第三方程式碼透過 <script> 元素新增到其他網站，則您的程式碼將在嵌入器的瀏覽上下文中執行。因此，當您呼叫 Storage.setItem() 或 SharedStorage.set() 時，鍵/值對將被寫入嵌入器的儲存。從瀏覽器的角度來看，當使用 <script> 標籤時，第一方程式碼和第三方程式碼之間沒有區別。
• 當您的第三方程式碼在 <iframe> 中新增到其他網站時，<iframe> 內的程式碼將以 <iframe> 的瀏覽上下文的源執行。如果 <iframe> 內的程式碼呼叫 Storage.setItem()，資料將被寫入 <iframe> 源的本地或會話儲存。如果 <iframe> 程式碼呼叫 SharedStorage.set()，資料將被寫入 <iframe> 源的共享儲存。

Web 儲存介面

Storage

允許您為特定域和儲存型別（會話或本地）設定、檢索和刪除資料。

Window

Web 儲存 API 使用兩個新屬性 — Window.sessionStorage 和 Window.localStorage — 擴充套件了 Window 物件。它們分別提供對當前域的會話和本地 Storage 物件的訪問，以及一個 storage 事件處理程式，該處理程式在儲存區域發生更改時（例如，儲存了新項）觸發。

StorageEvent

當文件的 Window 物件上的儲存區域發生更改時，就會觸發 storage 事件。

示例

為了說明一些典型的 Web 儲存用法，我們建立了一個名為 Web Storage Demo 的示例。該 登陸頁面 提供了用於自定義顏色、字型和裝飾影像的控制元件。當您選擇不同選項時，頁面會立即更新；此外，您的選擇會儲存在 localStorage 中，因此當您離開頁面後稍後再次載入時，您的選擇會被記住。

此外，我們還提供了一個 事件輸出頁面 — 如果您在另一個選項卡中載入此頁面，然後在登陸頁面中更改您的選擇，您將看到更新的儲存資訊作為 StorageEvent 觸發而輸出。

規範

瀏覽器相容性

api.Window.localStorage

api.Window.sessionStorage

隱私瀏覽 / 無痕模式

隱私視窗、無痕模式以及類似名稱的隱私瀏覽選項不會像歷史記錄和 Cookie 那樣儲存資料。在隱私模式下，localStorage 的處理方式與 sessionStorage 相同。儲存 API 仍然可用且功能齊全，但隱私視窗中儲存的所有資料將在瀏覽器或瀏覽器選項卡關閉時刪除。

另見

• 使用 Web Storage API
• 瀏覽器儲存配額和清除標準