Day 24 - LocalStorage 進階應用與資料持久化實作 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 13

Modern Web

Modern Web：從基礎、框架到前端學習系列第 24 篇

Day 24 - LocalStorage 進階應用與資料持久化實作

17th鐵人賽

zoeeyee

2025-10-08 01:28:22

56 瀏覽

分享至

今天我們要學習如何使用localStorage讓網頁資料在重新整理後依然能保存。
這是前端開發中非常實用的功能，例如：

儲存使用者偏好（主題模式、語言設定）
儲存表單資料
儲存使用者登入狀態或遊戲分數

課程目標

了解localStorage的基本概念
學會儲存、讀取、刪除與清除資料
實作：待辦清單（To-Do List）資料持久化

1.localStorage 基本操作

localStorage是瀏覽器內建的儲存空間，能永久保存資料（除非手動清除）。
儲存的資料會以key-value形式存在。

// 儲存資料
localStorage.setItem("username", "Rou-Yu");

// 讀取資料
let name = localStorage.getItem("username");
console.log(name); // "Rou-Yu"

// 刪除特定資料
localStorage.removeItem("username");

// 清除全部資料
localStorage.clear();

💡 所有儲存在 localStorage 的值都會被轉成「字串」。

2.儲存物件資料（使用 JSON）

因為localStorage只能存字串，所以要用JSON.stringify()與JSON.parse()。

let user = { name: "Rou-Yu", age: 22 };

// 轉成字串儲存
localStorage.setItem("userInfo", JSON.stringify(user));

// 取出時轉回物件
let storedUser = JSON.parse(localStorage.getItem("userInfo"));
console.log(storedUser.name); // "Rou-Yu"

3.實作：To-Do List + LocalStorage 持久化

建立一個簡單的代辦清單，讓使用者新增任務、刪除任務，並在重新整理後仍能保存。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day24 - LocalStorage To-Do List</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f5f7fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px;
    }

    h2 {
      color: #333;
      margin-bottom: 20px;
    }

    input {
      padding: 10px;
      width: 250px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }

    button {
      padding: 10px 15px;
      margin-left: 10px;
      background: #4caf50;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    ul {
      list-style: none;
      padding: 0;
      margin-top: 20px;
      width: 300px;
    }

    li {
      background: white;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .delete {
      color: red;
      cursor: pointer;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>📝 To-Do List (LocalStorage版)</h2>
  <div>
    <input type="text" id="taskInput" placeholder="輸入代辦事項...">
    <button id="addBtn">新增</button>
  </div>
  <ul id="taskList"></ul>

  <script>
    const taskInput = document.getElementById("taskInput");
    const addBtn = document.getElementById("addBtn");
    const taskList = document.getElementById("taskList");

    // 從 localStorage 讀取資料
    let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

    // 顯示任務列表
    function renderTasks() {
      taskList.innerHTML = "";
      tasks.forEach((task, index) => {
        const li = document.createElement("li");
        li.innerHTML = `
          ${task}
          <span class="delete" onclick="deleteTask(${index})">✖</span>
        `;
        taskList.appendChild(li);
      });
    }

    // 新增任務
    addBtn.addEventListener("click", () => {
      const task = taskInput.value.trim();
      if (task) {
        tasks.push(task);
        localStorage.setItem("tasks", JSON.stringify(tasks)); // 儲存到 localStorage
        renderTasks();
        taskInput.value = "";
      }
    });

    // 刪除任務
    function deleteTask(index) {
      tasks.splice(index, 1);
      localStorage.setItem("tasks", JSON.stringify(tasks)); // 更新 localStorage
      renderTasks();
    }

    // 載入時顯示
    renderTasks();
  </script>
</body>
</html>