87. localStorage 本地存储入门

本节目标：学会用 localStorage 在浏览器里持久保存数据，理解键值对存储模型，掌握增删改查四个核心操作。

什么是 Web Storage

以前浏览器存数据只能用 cookie。cookie 容量小（只有 4KB），每次请求都会带上服务器，挺浪费。

HTML5 带来了 Web Storage，容量更大（一般 5MB 起），数据只存在本地，不会自动发到服务器。简单说就是：更大的饼干罐，还不用每次都端给服务器看。

Web Storage 存的是键值对，也就是 key -> value 的形式。键和值都是字符串。想存对象？用 JSON.stringify 转一下就行。

浏览器兼容性

现代浏览器都支持。用之前可以简单检测一下：

if (typeof(Storage) !== "undefined") {
  // 支持 Web Storage
} else {
  // 不支持，换个方案吧
}

Tip

不同浏览器对 localStorage 的容量限制不一样，通常 5MB ~ 10MB。别往里塞大文件，存配置和小数据最合适。

存数据

存数据有两种写法，效果一样：

// 方法一：标准 API
localStorage.setItem("username", "张三");

// 方法二：像操作对象属性一样
localStorage.username = "张三";

用 setItem 更正式，还能用变量当键名。

const key = "theme";
const value = "dark";
localStorage.setItem(key, value);

取数据

读取同样两种写法：

// 方法一
const name = localStorage.getItem("username");

// 方法二
const name = localStorage.username;

取一个不存在的键，返回 null。

console.log(localStorage.getItem("不存在的键")); // null

删数据

删单个用 removeItem，删全部用 clear：

// 删掉指定键
localStorage.removeItem("username");

// 清空所有存储
localStorage.clear();

Note

clear() 会清掉当前域名下所有 localStorage 数据，不能只清一部分。动手前先想清楚。

存对象和数组

Web Storage 只存字符串。想存对象，得先序列化：

const user = {
  name: "张三",
  age: 25,
  hobbies: ["读书", "游泳"]
};

// 存：对象转字符串
localStorage.setItem("user", JSON.stringify(user));

// 取：字符串转回对象
const stored = JSON.parse(localStorage.getItem("user"));
console.log(stored.name); // "张三"

Warning

JSON.parse 时如果字符串格式不对会报错。建议加 try...catch 兜底。

实用示例：记住用户偏好

下面是一个完整的”记住主题选择”例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>localStorage 示例</title>
  <style>
    body.dark { background: #333; color: #fff; }
    body.light { background: #fff; color: #333; }
  </style>
</head>
<body>
  <h1>主题切换</h1>
  <button onclick="setTheme('dark')">深色</button>
  <button onclick="setTheme('light')">浅色</button>

  <script>
    // 页面加载时，读取上次保存的主题
    const saved = localStorage.getItem("theme");
    if (saved) {
      document.body.className = saved;
    }

    function setTheme(theme) {
      document.body.className = theme;
      localStorage.setItem("theme", theme);
    }
  </script>
</body>
</html>

每次切换主题都会存下来。关掉浏览器再打开，主题还在。

存储容量和注意事项

localStorage 存的是字符串，数字也会被转成字符串。读出来做运算要手动转换：

localStorage.setItem("count", "10");
const num = Number(localStorage.getItem("count")) + 1;
console.log(num); // 11

还有一个重要特性：同源共享。同一个域名、协议、端口下的页面，共用一份 localStorage。但不同域名之间互相不能访问——百度读不到腾讯的存储，安全有保障。

Tip

localStorage 没有过期时间。除非你手动删，或者用户清浏览器缓存，否则数据一直存在。