首頁 >web前端 >js教程 >LocalStorage 和 SessionStorage 逐步指南：在客戶端儲存資料

LocalStorage 和 SessionStorage 逐步指南：在客戶端儲存資料

PHPz原創: 2024-08-12 19:02:19985瀏覽

A Step-by-Step Guide to LocalStorage and SessionStorage: Storing Data on the Client Side

網路儲存簡介

網路儲存是現代瀏覽器中的一項強大功能，可讓您直接在客戶端儲存資料。即使在瀏覽器關閉後（使用 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：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Theme Selector</title>
  <style>
    body.light {
      background-color: white;
      color: black;
    }
    body.dark {
      background-color: black;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Theme Selector</h1>
  <button id="light">Light Theme</button>
  <button id="dark">Dark Theme</button>

  <script>
    const lightButton = document.getElementById('light');
    const darkButton = document.getElementById('dark');

    // Event listeners for theme selection
    lightButton.addEventListener('click', () => {
      document.body.className = 'light';
      localStorage.setItem('theme', 'light');
    });

    darkButton.addEventListener('click', () => {
      document.body.className = 'dark';
      localStorage.setItem('theme', 'dark');
    });

    // Load saved theme on page load
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.body.className = savedTheme;
    }
  </script>
</body>
</html>

解釋：

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

為什麼要使用網路儲存？

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

結論

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

以上是LocalStorage 和 SessionStorage 逐步指南：在客戶端儲存資料的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html for select Session using this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：React 中的 Prop Drilling：定義與範例下一篇：React 中的 Prop Drilling：定義與範例

看更多