當我們開發前端應用程式時，有時需要在瀏覽器中保存一些數據以便稍後使用。這就是 localStorage 發揮作用的地方，它提供了一種簡單而有效的方式在客戶端儲存少量永久性資料。如果你想先全面了解三種常見儲存機制的差異，建議可以先參考站內的前端資料儲存 Cookie、localStorage、sessionStorage 使用場景、限制、差異一文，掌握各自的適用時機與容量限制後，再來深入本篇的實際操作。
存儲數據到 localStorage
想像一下，你希望在用戶訪問網站時記住他們的使用者名稱。在現代 JavaScript 開發中，宣告變數建議全面改用 const 或 let。你可以使用以下程式碼來進行存儲：
// 假設要存儲一個使用者的名稱
const userName = "John Doe";
// 使用 localStorage 存儲數據
localStorage.setItem("user", userName);
console.log("Data stored in localStorage.");這段程式碼使用 localStorage.setItem(key, value)，將使用者名稱與鍵 "user" 關聯，然後永久存儲在瀏覽器的 localStorage 中。
從 localStorage 讀取數據
現在，當用戶再次訪問網站時，你可以檢查是否有先前保存的使用者名稱：
// 從 localStorage 讀取使用者名稱
const storedUserName = localStorage.getItem("user");
if (storedUserName) {
console.log(`找到使用者：${storedUserName}`);
} else {
console.log("在 localStorage 中未找到使用者。");
}這裡使用 localStorage.getItem(key) 透過鍵 "user" 從 localStorage 中讀取之前保存的值。
實務注意事項：處理物件與陣列資料序列化
localStorage 有一個非常重要的核心限制：它只能儲存字串（String）格式。如果你嘗試直接把JavaScript 物件或陣列存入，會因為自動進行字串轉型而變成 [object Object]，導致資料損毀。
因此，若要儲存結構化資料，必須先透過 JSON.stringify() 將物件轉為 JSON 字串；讀取時再使用 JSON.parse()還原回原來的物件或陣列格式：
// 準備一個使用者設定物件
const userPreferences = {
theme: "dark",
notifications: true,
fontSize: 16
};
// 儲存時：使用 JSON.stringify 序列化
localStorage.setItem("preferences", JSON.stringify(userPreferences));
// 讀取時：使用 JSON.parse 反序列化
const savedPreferences = localStorage.getItem("preferences");
if (savedPreferences) {
const preferencesObj = JSON.parse(savedPreferences);
console.log(`目前佈景主題設定：${preferencesObj.theme}`);
}刪除 localStorage 中的數據
如果你需要刪除保存的特定資料，可以使用以下程式碼：
// 從 localStorage 中刪除使用者名稱
localStorage.removeItem("user");
console.log("已從 localStorage 中刪除數據。");使用 localStorage.removeItem(key)，我們可以精準刪除 localStorage 中特定鍵對應的資料。
清空所有 localStorage 資料
如果你需要一次清除該網域下所有的 localStorage 資料，可以使用 clear() 方法：
// 清空當前網域的所有 localStorage 內容
localStorage.clear();
console.log("localStorage 已全部清空。");總的來說，localStorage 提供了一個直覺的介面，讓我們可以方便地在瀏覽器中保存和檢索資料。只要在處理複雜物件時記得搭配 JSON.stringify() 與 JSON.parse()，就能避開常見的型別踩坑點，有效提升前端應用的使用者體驗。
發表迴響