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

7次阅读

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

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

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]" —— 这是最常见的误用。

立即学习Java免费学习笔记(深入)”;

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

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 会导致脚本中断
  • 嵌套过深或含函数、undefineddate 对象等无法被 JSON.stringify() 序列化的值,会丢失或报错
  • 如果需要存 Date,先转成 ISO 字符串:new Date().toISOString()

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

删单个用 localStorage.removeItem(),清空用 localStorage.clear(),检查是否存在建议用 localStorage.getItem(key) !== null(而不是 inhasOwnProperty,因为它是 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.comhttps://b.example.com 互不可见
  • 私密模式下部分浏览器会禁用或重置 localStorage,首次加载可能为空

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

text=ZqhQzanResources