localStorage 用法

當我們開發前端應用程式時，有時需要在用戶的瀏覽器中保存一些數據，以便稍後使用。這就是 localStorage 發揮作用的地方，它提供了一種簡單而有效的方式在瀏覽器中儲存少量數據。

存儲數據到 localStorage：

想像一下，你希望在用戶訪問網站時記住他們的使用者名稱。你可以使用以下代碼：

// 假設要存儲一個使用者的名稱
var userName = "John Doe";

// 使用 localStorage 存儲數據
localStorage.setItem("user", userName);

console.log("Data stored in localStorage.");

這段代碼使用 localStorage.setItem(key, value)，將使用者名稱與鍵 "user" 關聯，然後存儲在 localStorage 中。

從 localStorage 讀取數據：

現在，當用戶再次訪問網站時，你可以檢查是否有先前保存的使用者名稱：

// 從 localStorage 讀取使用者名稱
var storedUserName = localStorage.getItem("user");

if (storedUserName) {
    console.log("找到使用者：" + storedUserName);
} else {
    console.log("在 localStorage 中未找到使用者。");
}

這裡使用 localStorage.getItem(key) 通過鍵 "user" 從 localStorage 中讀取之前保存的使用者名稱。

刪除 localStorage 中的數據：

如果你需要刪除保存的使用者名稱，可以使用以下代碼：

// 從 localStorage 中刪除使用者名稱
localStorage.removeItem("user");

console.log("已從 localStorage 中刪除數據。");

使用 localStorage.removeItem(key)，我們可以刪除 localStorage 中特定鍵的數據。

刪除/清空 localStorage

如果你需要清空 localStorage 中的所有資料，可以使用以下代碼：

localStorage.clear();

總的來說，localStorage 提供了一個簡單的界面，讓我們可以方便地在瀏覽器中保存和檢索數據，從而提升用戶體驗。