JavaScript 工具：localStorage 和 sessionStorage

JavaScript（通常縮寫為 JS）是現代網頁基礎設施的基石之一。它是一種輕量級、直譯式、物件導向的程式語言，支援第一等函式。JavaScript 最著名的是其在動態網頁中的應用。然而，由於其特性，JavaScript 也被用於非瀏覽器環境中。

在本指南中，我們將詳細討論兩個 JavaScript 物件: localStorage 以及 sessionStorage.

localStorage 與 sessionStorage 概述

物件 localStorage 以及 sessionStorage 是作為 Web Storage API 的一部分提供的。它是用於本地儲存鍵值對的絕佳工具。使用 localStorage 以及 sessionStorage 是 Cookie 的絕佳替代方案。這種方法提供了一些額外的好處：

• 資料儲存在本地，無法被伺服器讀取。這消除了 Cookie 的安全性問題。
• 它允許更高的儲存容量（對於大多數現代瀏覽器，最高可達 10 MB）。
• 簡單直觀的語法。

所有現代網頁瀏覽器都支援這些物件，因此不會有瀏覽器相容性問題。Cookie 在許多情況下仍然有用，例如身分驗證。然而，在某些情況下， localStorage 以及 sessionStorage 提供了更好的解決方案。

先決條件

要執行本教學中顯示的步驟，您需要以下組件：

• 一部配置妥當的 Linux 伺服器。本指南演示了 在 CloudSigma 上設定您自己的 Ubuntu 伺服器.
• Node.js 作為 JavaScript 執行環境。在此了解更多關於 在 Ubuntu 上安裝 Node.js 的資訊.
• 一個現代網頁瀏覽器，例如 Google Chrome 或 Firefox.

為了進行演示，我們取得了一個附帶 JS 指令碼的範例網頁。您可以了解更多關於 如何將 JavaScript 新增到 HTML 檔案的資訊:

至於文字編輯器，我們將使用 Visual Studio Code:

localStorage 和 sessionStorage 有什麼區別？

兩者 localStorage 以及 sessionStorage 皆源自同一個 API。它們的行為也完全相同。唯一的區別在於每個物件允許資料持久化的方式。在 sessionStorage 的情況下，資料會一直保留到視窗或分頁關閉為止。而使用 localStorage，資料會一直保留，直到瀏覽器快取被清除或 Web 應用程式將其清除為止。

在本教學中，我們’將主要關注 localStorage。然而， sessionStorage 的語法是相同的。我們’將展示如何使用 建立、讀取和更新鍵/值對localStorage.

步驟 1 – 建立條目

我們可以宣告一個條目到 localStorage 物件，使用 setItem()。此方法接受兩個參數：鍵及其對應的值。該方法的結構如下：

在以下範例中，我們建立了一個變數 key。使用 setItem() 方法，我們設定了一個新的 key 並將其值設定為 ‘value’:

步驟 2 – 讀取條目

現在，我們該如何讀取儲存在鍵中的值？要從 localStorage 取得鍵，我們’將使用方法 getItem()。它接受鍵的名稱並傳回儲存在該鍵中的值。我們’將使用 alert() 方法來顯示我們獲取的內容：

接下來，在網頁瀏覽器中開啟該網頁。它應該會顯示儲存在 中的值key:

步驟 3 – 更新條目

一旦設定了值，除非將其變更，否則它將保持不變。如果我們在同一個 上再次使用 setItem() 方法，key ，它將自動用新值取代舊值。

在以下範例中， key 首先以值 進行初始化‘value’。在下一行中，我們再次呼叫了 setItem() 並將值設定為 ‘new value’:

讓我們看看在瀏覽器中執行這段程式碼時會發生什麼事：

正如我們所見，該鍵的值被設定為 ‘新 值’.

步驟 4 – 刪除項目

如果 中有多個項目localStorage （以及 sessionStorage 也是如此）且不再需要時，建議在之後將其清除。這可以釋放出更多空間供稍後使用。應用程式的記憶體使用效率也會提高。

要從 刪除項目localStorage，有一個專用的方法 removeItem()。它將 鍵 作為參數，並將其從 中移除localStorage 資料池中：

讓我們在腳本中實作它：

執行時，輸出會顯示 null ，因為該 不存在任何值鍵:

步驟 5 – 清除項目

在前面的範例中，我們只移除了一個鍵。然而， localStorage 允許在單一步驟中清除所有儲存的項目。要清除所有項目， localStorage 提供了 方法clear()。它不需要任何參數：

實際運用此方法：

就像之前一樣，它會從 中移除所有項目localStorage，因此當嘗試存取 鍵 值時，它會傳回 null:

步驟 6 – 使用 JSON

• 儲存物件與陣列

該 localStorage 與 sessionStorage 物件只能儲存字串值。然而，有時您必須處理物件或陣列。在這種情況下，我們需要將它們轉換為字串。

JavaScript 具有 功能JSON.stringify() ，它會接收陣列/物件並將其轉換為字串。這篇文章提供了一個 JSON 格式的快速概述。如需更詳細的指南，您可以閱讀 JavaScript 中的 JSON.

在這個範例中，我們建立了一個物件 sampleObj，其中包含兩個欄位 name 與 location。我們將把它轉換為字串並儲存在 中鍵:

在這裡，輸出將是包含該物件資料的字串：

• 讀取物件與陣列

儲存時，我們將物件和陣列轉換為字串。我們也可以將此字串轉換回其原始格式。為此，我們將使用 方法JSON.parse()。它接收一個字串並將其轉換回 JSON 格式：

至於輸出，我們將其重新轉換為字串並進行格式化以利於檢視：

步驟 7 – 檢查 localStorage 中的項目

在本節中，我們將展示一個簡單的測試，以確定 localStorage 與 sessionStorage 是否包含任何項目。使用一個簡單的 if 敘述，我們可以檢查 localStorage 或 sessionStorage。如果存在項目，長度將會大於 0。

首先，實作以下範例：

在這裡，輸出將會是 ‘true’ ，因為在 localStorage:

步驟 8 – 迭代項目

The localStorage 和 sessionStorage 物件以類陣列結構儲存鍵。它們不支援 forEach 方法，因此我們必須遵循傳統技術，使用 for 迴圈來迭代每個項目。

在以下範例中，我們將檢查 localStorage 是否為空。如果不是空的，我們將迭代每個項目：

輸出將會逐一顯示所有項目：

步驟 9 – 檢查瀏覽器支援

我們可以透過檢查 localStorage（以及 sessionStorage）是否在 window 物件上可用來檢查其支援度。一個簡單的 if 敘述即可搞定：

在網頁瀏覽器中執行程式碼：

結語

本指南示範了如何使用 localStorage 和 sessionStorage 物件在 JavaScript 中於瀏覽器儲存鍵值對。其語法操作起來簡單得多。我們展示了如何建立、刪除和更新鍵值對。我們還解決了透過將物件和陣列轉換為字串（反之亦然）來儲存它們的問題。

若要進一步加深您的 JavaScript 知識，您可以查看以下教學，它們來自 我們的部落格:

• JavaScript 基礎：如何處理日期與時間
• JavaScript：如何對字串進行索引、分割和操作的教學
• 使用 JavaScript：類別（Classes）如何運作
• 使用 JavaScript：原型（Prototypes）與繼承（Inheritances）如何運作

祝您開發愉快！