setItem 和 getItem 是 Web Storage API 的核心方法，分别用于存入和读取字符串数据；setItem 接收键名和字符串值（复杂数据需 JSON.stringify），超出限额抛 QuotaExceededError；getItem 返回对应字符串或 null，取出后需 JSON.parse 还原，且须判空防错。
setItem 和 getItem 是 Web Storage API 提供的两个核心方法，用于在浏览器中持久化保存和读取字符串数据。它们操作的是 localStorage（长期存储）或 sessionStorage（会话级存储），最常用的是 localStorage。
setItem：把数据存进浏览器
它接收两个参数：键名（key）和值（value），且 value 必须是字符串。如果传入对象、数组或数字，会自动调用 .toString()，可能导致意外结果（比如对象变成 [object Object]）。
- 正确做法是先用
JSON.stringify()序列化复杂数据 - 键名建议用语义清晰、避免冲突的字符串，比如
"userPreferences" - 存储成功无返回值；若超出存储限额（通常约 5–10MB），会抛出
QuotaExceededError
示例：
localStorage.setItem("theme", "dark");localStorage.setItem("cartItems", JSON.stringify([{id: 1, name: "苹果"}]));
getItem：从浏览器取出数据
它接收一个键名，返回对应存储的字符串值；如果键不存在，返回 null（不是 undefined）。
- 取出的始终是字符串，需手动用
JSON.parse()还原对象或数组 - 建议加判断防止解析失败，比如检查是否为非空字符串再解析
- 不要直接信任返回值类型，尤其在跨页面或多次写入后
示例：
const theme = localStorage.getItem("theme"); // "dark"const cartStr = localStorage.getItem("cartItems");
const cart = cartStr ? JSON.parse(cartStr) : [];
配合使用时的常见注意事项
- 存储前确认值可序列化：函数、undefined、Symbol、Date 实例等无法被
JSON.stringify正确处理 - 敏感信息（如 token、密码）不建议存在
localStorage，容易被 XSS 攻击窃取 - 修改数据后记得更新存储：不能只改 JS 变量，忘了调用
setItem - 删除用
removeItem(key)，清空用clear()，避免残留旧数据
简单封装提升可用性（可选）
为减少重复判断和转换，可以封装一层工具函数：
const storage = {set(key, value) {
localStorage.setItem(key, JSON.stringify(value));
},
get(key) {
const str = localStorage.getItem(key);
return str ? JSON.parse(str) : null;
}
};
// 使用：
storage.set("count", 42);
console.log(storage.get("count")); // 42
