数据存储入门：localStorage 与 JSON

数据存在哪里

localStorage：浏览器里的”小本子”

localStorage 是浏览器提供的本地存储，数据存在用户电脑上。

// 存数据
localStorage.setItem('username', '小明');

// 取数据
const name = localStorage.getItem('username'); // "小明"

// 删数据
localStorage.removeItem('username');

特点：

• ✅ 数据持久保存（关掉浏览器也不丢）
• ✅ 不需要后端和数据库
• ❌ 只能存字符串
• ❌ 容量有限（约 5MB）

JSON：数据的通用语言

JSON 是一种数据格式，用来结构化地表示数据。

JSON 格式

{
  "name": "小明",
  "age": 25,
  "hobbies": ["编程", "游戏"],
  "address": {
    "city": "北京",
    "district": "海淀"
  }
}

JS 对象 ↔ JSON 字符串

// JS 对象 → JSON 字符串
const user = { name: '小明', age: 25 };
const jsonStr = JSON.stringify(user);
// → '{"name":"小明","age":25}'

// JSON 字符串 → JS 对象
const obj = JSON.parse(jsonStr);
// → { name: '小明', age: 25 }

实战：用 localStorage 存列表数据

// 保存任务列表
const todos = [
  { id: 1, text: '学 AI 编程', done: false },
  { id: 2, text: '做个人主页', done: false },
];
localStorage.setItem('todos', JSON.stringify(todos));

// 读取任务列表
const saved = localStorage.getItem('todos');
const todos = saved ? JSON.parse(saved) : [];

什么时候用 localStorage

场景	适不适合
用户偏好（暗色模式）	✅ 适合
草稿保存	✅ 适合
购物车	✅ 适合
用户账号信息	❌ 不应该存（安全风险）
大量数据	❌ 容量不够
多设备同步	❌ 只在当前浏览器

进阶：数据库

当数据多了、需要多用户共享时，就需要真正的数据库。常见选择：

数据库	类型	适合场景
SQLite	文件型	小型项目、本地应用
PostgreSQL	关系型	中大型项目
MongoDB	文档型	快速原型、灵活结构
Supabase	云服务	全栈项目、实时数据

对于 AI 编程初学者，推荐从 SQLite 或 Supabase 开始。

小结

• localStorage = 浏览器里的小本子，存简单数据
• JSON = 数据的通用格式
• 真正的数据库 = 当数据多、要共享时使用

下一篇我们开始后端入门，理解服务器是怎么工作的。