JavaScript 浏览器本地存储

一、为什么需要本地存储

浏览器默认是无状态的------每次刷新页面，JavaScript 中的所有变量都会重置。如果希望数据在页面刷新后仍然存在（比如用户登录状态、主题偏好、表单草稿等），就需要使用浏览器提供的本地存储功能。

二、localStorage 与 sessionStorage

HTML5 引入了 localStorage 和 sessionStorage 两个对象，它们都属于 Web Storage API，用于在浏览器中以键值对的形式存储数据。

2.1 基本 API

两者使用完全相同的接口：

javascript 复制代码

// 存储数据
localStorage.setItem("username", "zhangsan");

// 读取数据
const name = localStorage.getItem("username");
console.log(name); // "zhangsan"

// 删除某一项
localStorage.removeItem("username");

// 清空所有数据
localStorage.clear();

sessionStorage 的用法一模一样：

javascript 复制代码

sessionStorage.setItem("temp", "hello");
sessionStorage.getItem("temp"); // "hello"
sessionStorage.removeItem("temp");
sessionStorage.clear();

2.2 两者的区别

特性	localStorage	sessionStorage
生命周期	永久保存，除非手动删除	关闭标签页即自动清除
页面刷新	数据仍存在	数据仍存在
跨标签页（同源）	共享	不共享，各自独立
典型用途	记住用户偏好、主题	保存表单草稿、临时状态

一句话区分 ：localStorage 持久保存，sessionStorage 随标签页关闭而消失。

2.3 简单示例：记住用户名

html 复制代码

<!DOCTYPE html>
<html>
<body>
  <input type="text" id="username" placeholder="输入用户名">
  <button onclick="saveName()">保存</button>
  <button onclick="clearName()">清除</button>

  <script>
    const input = document.getElementById("username");

    // 页面加载时，如果 localStorage 中有用户名，就回填到输入框
    const saved = localStorage.getItem("username");
    if (saved) {
      input.value = saved;
    }

    function saveName() {
      localStorage.setItem("username", input.value);
      alert("已保存");
    }

    function clearName() {
      localStorage.removeItem("username");
      input.value = "";
    }
  </script>
</body>
</html>

刷新页面后，输入框中仍然会显示之前保存的用户名，这就是 localStorage 的作用。

三、特性

3.1 只能存储字符串

localStorage 和 sessionStorage 的值只能是字符串类型。如果存入数字、布尔值或对象，会被自动转为字符串：

javascript 复制代码

localStorage.setItem("count", 100);
console.log(typeof localStorage.getItem("count")); // "string"，不是 "number"

要存储对象，需要用 JSON.stringify 转换，读取时用 JSON.parse 还原：

javascript 复制代码

const user = { name: "zhangsan", age: 20 };

// 存入
localStorage.setItem("user", JSON.stringify(user));

// 取出并还原
const saved = JSON.parse(localStorage.getItem("user"));
console.log(saved.name); // "zhangsan"
console.log(saved.age);  // 20

3.2 容量限制

每个域名下的 localStorage 和 sessionStorage 各自有约 5MB 的存储空间。超出限制时，写入操作会抛出异常：

javascript 复制代码

try {
  localStorage.setItem("key", "value");
} catch (e) {
  console.log("存储空间已满");
}

四、Todo 列表

下面使用 localStorage 实现一个可以持久保存的待办事项列表：

html 复制代码

<!DOCTYPE html>
<html>
<body>
  <h2>待办事项</h2>
  <input type="text" id="taskInput" placeholder="输入新任务">
  <button onclick="addTask()">添加</button>
  <ul id="taskList"></ul>

  <script>
    // 从 localStorage 读取已有任务
    function loadTasks() {
      const raw = localStorage.getItem("tasks");
      return raw ? JSON.parse(raw) : [];
    }

    // 保存任务到 localStorage
    function saveTasks(tasks) {
      localStorage.setItem("tasks", JSON.stringify(tasks));
    }

    // 渲染列表
    function render() {
      const tasks = loadTasks();
      const list = document.getElementById("taskList");
      list.innerHTML = "";
      tasks.forEach((task, index) => {
        const li = document.createElement("li");
        li.textContent = task;
        // 点击删除
        li.onclick = () => {
          tasks.splice(index, 1);
          saveTasks(tasks);
          render();
        };
        list.appendChild(li);
      });
    }

    // 添加任务
    function addTask() {
      const input = document.getElementById("taskInput");
      const text = input.value.trim();
      if (!text) return;
      const tasks = loadTasks();
      tasks.push(text);
      saveTasks(tasks);
      input.value = "";
      render();
    }

    // 页面加载时渲染
    render();
  </script>
</body>
</html>

刷新页面后，之前添加的任务仍然存在------因为数据保存在 localStorage 中。

五、其他存储方式简介

除了 Web Storage，浏览器还提供了其他存储机制。这里做一个简要了解，后续深入学习时会详细展开：

Cookie：最古老的存储方式，容量只有 4KB，会随每次 HTTP 请求自动发送给服务端。主要用于维持登录会话。
IndexedDB：浏览器内置的"数据库"，容量远大于 Web Storage（通常几百 MB），用于存储大量结构化数据。