localStorage只存字符串,存对象须JSON.stringify(),取值需JSON.parse()并try/catch,数字布尔需显式转换,键名用字母数字组合,超限捕获QuotaExceededError,clear()慎用。
localStorage 不是“存个数据就完事”的黑盒,它只认字符串,存对象不序列化就等于存了个空壳——这是你第一次用就可能翻车的地方。
localStorage.setItem() 是唯一推荐的写入方式,它明确要求 value 必须是字符串。传对象、数组、null 或 undefined 都会被强制转成字符串,比如 localStorage.setItem('user', {name: 'Alice'}) 实际存进去的是 "[object Object]",取出来根本没法用。
JSON.stringify(),例如 localStorage.setItem('settings', JSON.stringify({theme: 'dark'}))
false → "false"),显式转更可控,比如 localStorage.setItem('count', String(42)) 或 localStorage.setItem('active', 'true')

kebab-case 或 camelCase 字母数字组合QuotaExceededError,而不是等页面卡死:try {
localStorage.setItem('data', hugeString);
} catch (e) {
if (e.name === 'QuotaExceededError') {
console.warn('localStorage full, fallback to memory cache');
}
}localStorage.getItem() 永远返回字符串或 null,哪怕你当初存的是 42 或 true。直接拿它做判断或计算,90% 的 bug 都出在这儿。
if (localStorage.getItem('isLogin') === true) —— 它永远是 false,因为取出来是字符串 "true"
JSON.parse(),并加 try/catch:const data = localStorage.getItem('config');
let config = {};
try {
config = data ? JSON.parse(data) : {};
} catch (e) {
console.warn('localStorage config parse failed, using default');
}const count = Number(localStorage.getItem('count')) || 0
if (localStorage.getItem('x')) —— 因为 "0"、"false" 都是真值;正确写法是 localStorage.getItem('x') !== null
localStorage.removeItem() 删除单个键,安全;localStorage.clear() 是核弹级操作,会把同源下所有页面共用的数据一锅端,生产环境误用等于清空用户全部偏好设置。
Object.keys(localStorage).forEach(key => {
if (key.startsWith('cart_')) {
localStorage.removeItem(key);
}
});removeItem() 对不存在的键静默失败,不报错也不提示,适合“尽力删”场景clear() 不可逆,且影响范围远超当前页面——比如你在一个管理后台调用它,可能顺手清掉用户在另一个标签页里刚填一半的表单草稿真正难的不是 API 会不会用,而是记住:localStorage 没有类型、没有过期、没有通知、没有事务。它像一张纸条,你写了什么,它就原样贴在浏览器里,直到你撕掉,或者用户自己清空——而这张纸条上,永远只能写字符串。