sessionStorage是一個用於在單個瀏覽器選項卡中臨時儲存資料的便捷工具。
- 我們將揭示它的優點和侷限性，特別是它無法跨不同選項卡共享資訊。
- 最後，您將清楚地瞭解 sessionStorage 的角色，並在需要時發現在選項卡之間共享資料的替代方法。
背景上下文
想象一下您正在瀏覽一個購物網站並將商品新增到您的購物車。但是如果您關閉選項卡並稍後再回來會發生什麼？傳統上，網站依靠 cookie 來記住這些資訊。 Cookie 就像網站留下的小筆記，但它們的大小和安全性可能受到限制。
Web 儲存是網站在裝置上儲存資訊的更強大的方式。這就像您的瀏覽器內有一個專用的迷你儲存單元。這使得網站可以在本地儲存資料，而不必僅僅依賴 cookie。
網路儲存有兩種主要型別：
- sessionStorage： 將其視為單個瀏覽器選項卡中的臨時記事本。它非常適合您僅在特定瀏覽會話期間需要的內容，例如購物車中的商品示例。一旦關閉選項卡，資訊就會消失，就像扔掉記事本一樣。
- localStorage： 這就像瀏覽器中更永久的儲存盒。即使您關閉選項卡或視窗後，此處儲存的資訊仍然存在，並且在您明確刪除之前一直可用。它對於您想要在瀏覽會話中記住的事情非常有用，例如登入憑據或網站首選項。
在本文中，我們將重點關注 sessionStorage，這是一種臨時儲存選項，可在單個瀏覽器選項卡中方便地儲存資訊。
sessionStorage：瀏覽器的臨時記事本
sessionStorage 是網路瀏覽器中的一項內建功能，允許網站在您的裝置上本地儲存資料，但有一點不同：與 cookie 不同，sessionStorage 中儲存的資料是臨時的，當您關閉瀏覽器選項卡時就會消失。將其視為記事本，用於記下當前瀏覽會話期間所需的內容，但以後不需要記住。
sessionStorage 的功能如下：
- 單個選項卡內的資料永續性（包括頁面重新載入）： sessionStorage 中儲存的資訊在瀏覽器選項卡的整個生命週期內持續存在。即使您重新整理頁面或導航到同一選項卡中的不同連結，資料仍然可以訪問。這使得它對於以下任務很有用：
- 以多頁形式記住您的進度。
- 跟蹤網頁上的選擇或偏好。
- 儲存會話期間 JavaScript 函式使用的臨時資料。
使用sessionStorage
sessionStorage 提供了與儲存的資料互動的方法：
- setItem(key, value)：該方法用於儲存鍵值對。這key是資料的唯一識別符號，就像筆記上的標籤一樣。這value是您要儲存的實際資料，可以是文字、數字，甚至是陣列或物件（在後臺轉換為字串）。
- getItem(key)：要檢索與特定鍵關聯的資料，請使用getItem(key).此方法以字串形式返回儲存的值，或者null如果鍵不存在則返回。
- removeItem(key)：如果要刪除特定的資料，請使用removeItem(key).此方法刪除與提供的鍵關聯的鍵值對。
- clear()：要清除當前選項卡的 sessionStorage 中儲存的所有資料，請使用該clear()方法。這基本上會清除你的記事本，刪除所有臨時資訊。
sessionStorage的侷限性
sessionStorage 為 Web 開發人員提供了一個有價值的工具，但瞭解其關鍵限制至關重要：選項卡之間的資料隔離。與在所有選項卡中儲存資料的 localStorage 不同，sessionStorage 為每個單獨的瀏覽器選項卡建立單獨的儲存空間。這意味著您儲存在一個選項卡的 sessionStorage 中的資訊將無法被其他選項卡訪問，即使它們來自同一網站。
這種隔離的存在有一個特定的原因：隔離的會話上下文。每個瀏覽器選項卡都在其自己的獨立會話中執行。這可以確保：
- 隱私：想象一下，您在一個選項卡中登入社交媒體帳戶，並在另一個選項卡中瀏覽購物網站。儲存在社交媒體選項卡的 sessionStorage 中的資料（例如您的登入資訊）與購物選項卡保持隔離，從而防止意外的資訊共享。
- 安全性：如果惡意指令碼成功滲透到您的一個選項卡，它將無法訪問儲存在其他選項卡的 sessionStorage 中的資料。這種劃分有助於遏制潛在的安全風險。
- 組織：將資料分開可以防止混亂。您不希望一個網站上的購物車商品與另一個選項卡中的不同購物會話混淆。
雖然這種隔離乍一看似乎是一個缺點，但它實際上是一項至關重要的安全和隱私功能。但是，如果您需要跨多個選項卡共享資料，則可以使用 localStorage 等替代 Web 儲存解決方案或 Broadcast Channel API 等通訊方法。
在瀏覽器選項卡之間共享資料的替代方案
雖然 sessionStorage 在單個選項卡中的臨時資料管理方面表現出色，但如果您需要跨多個選項卡甚至瀏覽器會話保留資訊怎麼辦？以下是跨表通訊的一些替代方法：
1. localStorage：瀏覽器的持久儲存盒
將 sessionStorage 想象為一個臨時記事本，但 localStorage 就像瀏覽器中更永久的儲存盒。即使關閉選項卡或視窗後，儲存在 localStorage 中的資料仍然存在。它非常適合儲存您想要在不同瀏覽會話中訪問的資訊，例如：
- 您經常訪問的網站的登入憑據。
- 使用者對網站佈局或主題的偏好。
- 最近檢視的專案或搜尋歷史記錄（如果使用者需要）。
setItem(key, value)與 sessionStorage 不同，localStorage 使用、getItem(key)、removeItem(key)和等方法提供相同的儲存和檢索資料的功能clear()。但是，儲存在 localStorage 中的資料仍然可用，直到使用者或網站本身明確刪除為止。
2. 廣播通道 API 或自定義事件：在選項卡之間廣播訊息
如果您需要一種更動態的方式在選項卡之間共享資料，則可以使用廣播頻道 API 或自定義事件等選項。這些方法有利於訊息廣播，允許選項卡進行通訊和交換資訊。
- 廣播通道 API：這種較新的方法為選項卡提供了傳送和接收訊息的專用通道。想象一下多個收音機調諧到相同的頻率 - 選項卡可以訂閱特定頻道並收聽同一頻道上其他選項卡廣播的訊息。
- 自定義事件：這是一種更成熟的技術，選項卡可以排程其他選項卡可以偵聽的自定義事件。可以將其想象為升起一個標誌 - 選項卡會引發具有特定資料的自定義事件，並且其他選項卡可以配置為在“看到”此事件被引發時做出反應。
與 localStorage 相比，廣播通道 API 和自定義事件為選項卡之間的實時資料交換提供了更大的靈活性。然而，與 localStorage 的簡單鍵值儲存相比，它們需要更多的開發工作來實現。
結論
sessionStorage 為 Web 開發人員提供了一個強大的工具，可在單個瀏覽器選項卡中提供臨時資料儲存。它非常適合諸如記住特定瀏覽會話期間的表單進度或使用者選擇之類的任務。
比較：
- sessionStorage 在選項卡之間的隔離阻止了跨不同視窗的資料共享。瞭解這一限制是關鍵。
- 對於跨選項卡和會話的長期資料永續性，localStorage 是一個可靠的選擇。
- 當選項卡之間需要實時通訊時，廣播通道 API 或自定義事件可提供更動態的解決方案。