網路儲存簡介

網路儲存是現代瀏覽器中的強大功能，可讓您直接在客戶端儲存資料。即使在瀏覽器關閉後（使用 LocalStorage）或僅在會話期間（使用 SessionStorage），也可以保留此資料。這些工具對於儲存使用者偏好、購物車資料和其他類型的增強使用者體驗的資訊非常有用。

LocalStorage 和 SessionStorage 之間的差異

了解 LocalStorage 和 SessionStorage 之間的差異是有效使用它們的關鍵：

• 本地儲存：

  • 即使瀏覽器關閉後資料仍然存在。
  • 它可用於儲存長期數據，例如使用者偏好或令牌。
  • 儲存的資料沒有過期時間，並且在明確刪除之前一直可用。

• 會話儲存：

  • 資料僅在會話期間可用（即，只要選項卡或瀏覽器視窗開啟）。
  • 會話結束（選項卡關閉）後，資料將自動清除。
  • 它對於臨時資料非常有用，例如特定於會話的使用者互動或選擇。

儲存、檢索和刪除數據

使用 LocalStorage 和 SessionStorage 非常簡單。以下範例示範如何儲存、檢索和刪除資料。

// Storing data
localStorage.setItem('username', 'john_doe');
sessionStorage.setItem('sessionID', '123456');

// Retrieving data
const username = localStorage.getItem('username');
const sessionID = sessionStorage.getItem('sessionID');

// Removing data
localStorage.removeItem('username');
sessionStorage.removeItem('sessionID');

// Clearing all data
localStorage.clear();
sessionStorage.clear();

真實範例：儲存使用者首選項

為了將這些概念付諸實踐，讓我們創建一個簡單的 Web 應用程序，允許用戶選擇並保存他們喜歡的主題（淺色或深色）。此首選項將使用 LocalStorage 進行存儲，以便即使在瀏覽器關閉後它仍然存在。

HTML：

  
  
  
  


  
Theme Selector
  Light Theme
  Dark Theme

  

解釋：

• 主題選擇：使用者可以透過點選對應的按鈕來選擇淺色或深色主題。
• 儲存首選項：選擇主題後，它將儲存在 LocalStorage 中的「theme」鍵下。
• 載入首選項：頁面載入時，腳本會檢查 LocalStorage 中是否有任何已儲存的主題並自動套用它。

為什麼要使用網路儲存？

Web儲存提供了一種簡單有效的方法來增強使用者體驗。透過在客戶端儲存首選項、會話或其他必要數據，您可以創建更個人化、響應靈敏且無縫的 Web 應用程式。了解並利用 LocalStorage 和 SessionStorage 將幫助您建立更智慧的應用程序，滿足用戶需求，而無需嚴重依賴伺服器端儲存。

結論

LocalStorage 和 SessionStorage 是任何 Web 開發人員的必備工具。它們允許您直接在瀏覽器中儲存數據，從而在數據可用方式和時間方面提供靈活性。無論您需要保留使用者首選項還是維護特定於會話的信息，Web 儲存都可以讓您輕鬆完成此任務。透過掌握這些工具，您可以大幅增強 Web 應用程式的功能和使用者體驗。