javascript本地存储怎么用_如何使用localStorage【教程】_网络技术

localStorage只能存储字符串，存对象或数组需JSON.stringify()和JSON.parse()，基本类型会隐式转为字符串，取值后需手动转换，无过期机制，容量5–10MB，敏感信息不宜单独存放。

localStorage 不是万能的，它只能存字符串，所有值都会被自动转成字符串；想存对象或数组，必须自己 JSON.stringify() 和 JSON.parse()。

怎么存和取基本数据（字符串、数字、布尔）

直接用 localStorage.setItem() 和 localStorage.getItem() 即可，但要注意：数字、布尔值会被隐式转

成字符串，取出来时还是字符串类型，不是原始类型。

例如：

localStorage.setItem('count', 42);        // 存数字
localStorage.setItem('active', true);     // 存布尔
console.log(localStorage.getItem('count'));   // "42"（字符串）
console.log(localStorage.getItem('active'));  // "true"（字符串）

如果需要保持原始类型，必须手动转换：Number(localStorage.getItem('count')) 或 JSON.parse(localStorage.getItem('active'))
不推荐依赖隐式转换，容易在条件判断中出错（比如 "false" 是真值）
localStorage 无过期机制，存进去就一直留着，除非手动删或用户清缓存

怎么安全地存对象或数组

不能直接 localStorage.setItem('user', {name: 'Alice'})，会变成 "[object Object]" —— 这是最常见的误用。

必须显式序列化和反序列化：

const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user)); // ✅

const saved = localStorage.getItem('user');
const parsed = saved ? JSON.parse(saved) : null; // ✅ 防空判断

务必加 try...catch 包裹 JSON.parse()，否则后端改了格式或手动编辑过 localStorage 会导致脚本中断
嵌套过深或含函数、undefined、Date 对象等无法被 JSON.stringify() 序列化的值，会丢失或报错
如果需要存 Date，先转成 ISO 字符串：new Date().toISOString()

怎么删、清、查有没有某个键

删单个用 localStorage.removeItem()，清空用 localStorage.clear()，检查是否存在建议用 localStorage.getItem(key) !== null（而不是 in 或 hasOwnProperty，因为它是 Storage 实例，不是普通对象）。

localStorage.removeItem('token') —— 删除指定键
localStorage.clear() —— 清掉当前域名下所有 localStorage（慎用，影响其他功能）
if (localStorage.getItem('theme') !== null) { ... } —— 最稳妥的存在性判断
不要用 'theme' in localStorage，它返回 true 即使值是 null 或空字符串

localStorage 的边界和替代选择

单域名下容量通常为 5–10MB（Chrome 约 10MB，Safari 移动端仅 2.5MB），但写入大体积数据会阻塞主线程，且没有事件通知机制。

超过几 MB 就该考虑 IndexedDB，尤其要存二进制、大量结构化数据时
敏感信息（如 token）别只靠 localStorage，它不防 XSS；应配合 HttpOnly Cookie + 后端校验
同源限制严格：子域名之间不共享，https://a.example.com 和 https://b.example.com 互不可见
私密模式下部分浏览器会禁用或重置 localStorage，首次加载可能为空

真正难的不是语法，而是什么时候不该用它——比如实时同步、多标签协同、大文件缓存，这些场景 localStorage 都撑不住。

# javascript # java # js # json # cookie # 浏览器 # safari # 后端 # 隐式转换 # chrome # xss # Object # NULL # if # count # date

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】