LocalStorage 入门

LocalStorage 是浏览器提供的一种轻量级数据存储方案。不需要后端数据库，纯前端就能存数据。

基本用法

// 存数据
localStorage.setItem('key', 'value');

// 取数据
const val = localStorage.getItem('key');

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

// 清空全部
localStorage.clear();

存对象

LocalStorage 只能存字符串，对象需要序列化：

const user = { name: '小明', age: 18 };

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

// 取
const saved = JSON.parse(localStorage.getItem('user'));
console.log(saved.name); // '小明'

实用模式：数组操作

这是这个网站上所有小工具（待办、心情、笔记）都在用的模式：

// 读
let items = JSON.parse(localStorage.getItem('my_list') || '[]');

// 增
items.push({ text: '新项目', done: false });
localStorage.setItem('my_list', JSON.stringify(items));

// 删
items.splice(index, 1);
localStorage.setItem('my_list', JSON.stringify(items));

// 改
items[index].done = true;
localStorage.setItem('my_list', JSON.stringify(items));

技巧：把读写封装成 save() 和 load() 两个函数，每次修改完调 save() 自动持久化。

注意事项

• 容量限制：大约 5MB（每个域名）
• 数据是永久的，不会过期（用 removeItem 或 clear 手动删除）
• 数据按域名隔离，不同网站之间互不干扰
• 只能存字符串，对象和数组需要用 JSON.stringify / JSON.parse
• 不适合存敏感信息（密码、Token 等）

和 Cookie 的区别

LocalStorage:  5MB, 不自动发送到服务器, 纯前端读写
Cookie:        4KB, 每次请求自动发送, 服务端也可以读写
SessionStorage: 同 LocalStorage, 但关闭标签页就清空

做纯前端小工具用 LocalStorage 就够了。这个网站上的待办清单、每日心情、笔记速记都是靠它存的。