Web知识篇
什么是LocalStorage
浏览器里的"小仓库"
LocalStorage 是浏览器提供的一种本地存储机制，可以把数据保存在用户的浏览器中，即使关闭网页、重启电脑，数据依然存在。
💡 类比：LocalStorage 就像你桌上的便签本。记下的东西随时能查看，不用每次都打电话（发请求）问别人。
加载图表中...
为什么需要 LocalStorage？
HTTP 是无状态的——服务器不记得你上次做了什么。但很多场景需要"记住"一些东西：
| 场景 | 需要记住什么 | 用 LocalStorage |
|---|---|---|
| 深色模式 | 用户选了深色还是浅色 | ✅ |
| 语言偏好 | 用户选了中文还是英文 | ✅ |
| 草稿保存 | 用户写了一半的文章 | ✅ |
| 购物车 | 未登录用户加了什么商品 | ✅ |
| 不再提示 | 用户点了"不再显示此弹窗" | ✅ |
基本用法
LocalStorage 的 API 非常简单，只有几个方法：
// 存储数据
localStorage.setItem("theme", "dark");
localStorage.setItem("username", "张三");
// 读取数据
const theme = localStorage.getItem("theme"); // "dark"
const username = localStorage.getItem("username"); // "张三"
// 删除某一项
localStorage.removeItem("username");
// 清空所有数据
localStorage.clear();
加载图表中...
存储对象和数组
LocalStorage 只能存储字符串。要存对象或数组，需要用 JSON 转换：
// ❌ 错误：直接存对象，会变成 "[object Object]"
localStorage.setItem("user", { name: "张三" });
// ✅ 正确：先转成 JSON 字符串
const user = { name: "张三", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
// 读取时再解析回来
const stored = localStorage.getItem("user");
const parsed = JSON.parse(stored);
console.log(parsed.name); // "张三"
封装一个好用的工具函数
// 存储（自动 JSON 序列化）
function setStorage(key, value) {
localStorage.setItem(key, JSON.stringify(value));
}
// 读取（自动 JSON 解析）
function getStorage(key, defaultValue = null) {
const item = localStorage.getItem(key);
if (item === null) return defaultValue;
try {
return JSON.parse(item);
} catch {
return item;
}
}
// 使用
setStorage("settings", { theme: "dark", lang: "zh" });
const settings = getStorage("settings", {}); // { theme: "dark", lang: "zh" }
实战：深色模式切换
"use client";
import { useState, useEffect } from "react";
function ThemeToggle() {
const [isDark, setIsDark] = useState(false);
// 组件加载时，从 LocalStorage 读取偏好
useEffect(() => {
const saved = localStorage.getItem("theme");
if (saved === "dark") setIsDark(true);
}, []);
// 切换主题
const toggle = () => {
const newTheme = !isDark;
setIsDark(newTheme);
localStorage.setItem("theme", newTheme ? "dark" : "light");
};
return (
<button onClick={toggle}>
{isDark ? "🌙 深色模式" : "☀️ 浅色模式"}
</button>
);
}
加载图表中...
LocalStorage vs 其他存储方式
| 特性 | LocalStorage | SessionStorage | Cookie |
|---|---|---|---|
| 容量 | ~5MB | ~5MB | ~4KB |
| 生命周期 | 永久（手动删除） | 关闭标签页清除 | 可设置过期时间 |
| 发送到服务器 | ❌ 不会 | ❌ 不会 | ✅ 每次请求自动携带 |
| API | 简单 | 简单 | 复杂 |
| 适用场景 | 用户偏好、草稿 | 临时表单数据 | 登录状态 |
加载图表中...
注意事项
| 注意点 | 说明 |
|---|---|
| 只能存字符串 | 对象/数组需要 JSON.stringify |
| 同源限制 | 不同域名的页面无法互相访问 |
| 不要存敏感数据 | Token、密码等不应该放在 LocalStorage |
| 容量有限 | 约 5MB，不适合存大文件 |
| 同步操作 | 读写是同步的，大量数据可能阻塞页面 |
| 服务端不可用 | Next.js 服务端组件中不能使用 |
在 Next.js 中使用的注意点
"use client"; // ← 必须是客户端组件
import { useEffect, useState } from "react";
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
// ✅ 在 useEffect 中使用，确保在浏览器环境
const saved = localStorage.getItem("myData");
if (saved) setData(JSON.parse(saved));
}, []);
// ❌ 不能在组件顶层直接调用（服务端渲染时 localStorage 不存在）
// const data = localStorage.getItem("myData"); // 报错！
}
在 DevTools 中查看 LocalStorage
打开 F12 → Application → 左侧 Local Storage → 选择域名，即可看到所有存储的键值对。你也可以在这里手动添加、修改、删除数据。
🎯 AI编程小贴士：需要在项目中实现"记住用户偏好"功能？告诉 AI"帮我用 LocalStorage 实现一个深色模式切换，要在 Next.js 中使用"，它会帮你处理好服务端渲染兼容等细节。
小结
- LocalStorage 是浏览器的本地存储，数据永久保存
- API 简单：
setItem、getItem、removeItem、clear - 只能存字符串，对象需要 JSON.stringify/parse 转换
- 适合存用户偏好、草稿等非敏感数据
- 在 Next.js 中必须在客户端组件的
useEffect中使用 - 不要存密码、Token 等敏感信息