JavaScript本地存储使用详解

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript本地存储操作全攻略》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

JavaScript本地存储使用localStorage和sessionStorage，以字符串键值对形式保存数据，需用JSON.stringify()存对象、JSON.parse()取对象，并注意null处理、同源限制及容量上限。

JavaScript 操作本地存储主要靠 localStorage 和 sessionStorage，它们都提供简单的键值对存储，数据以字符串形式保存。不需要额外库，浏览器原生支持，但要注意同源限制和容量上限（通常 5–10MB）。

存数据：setItem() 最常用

用 setItem(key, value) 把数据存进 localStorage（长期保存）或 sessionStorage（页面关闭即清空）：

• value 必须是字符串；存对象或数组要先 JSON.stringify()
• key 名建议用有意义的英文名，避免特殊字符和空格
• 示例：localStorage.setItem('theme', 'dark')；localStorage.setItem('user', JSON.stringify({id: 1, name: 'Alice'}))

取数据：getItem() 要记得解析

getItem(key) 返回字符串，如果之前存的是对象，得手动 JSON.parse()：

• 如果 key 不存在，返回 null，不是 undefined，判断时注意
• 示例：const theme = localStorage.getItem('theme') → 'dark'；const user = JSON.parse(localStorage.getItem('user'))
• 安全写法：const user = JSON.parse(localStorage.getItem('user') || '{}')，避免解析 null 报错

删数据：removeItem() 和 clear() 各有用途

removeItem(key) 删除单个键；clear() 清空整个存储空间（谨慎使用）：

• 删除后再次 getItem(key) 会返回 null
• sessionStorage.clear() 不会影响 localStorage，反之亦然
• 适合退出登录时清理用户信息：localStorage.removeItem('token')

其他实用操作：key()、length、遍历

可以查有多少项、获取第 N 个 key，甚至遍历所有数据：

• localStorage.length 返回当前键的数量
• localStorage.key(0) 获取第一个键名（顺序不保证，仅作参考）
• 遍历推荐用 for (let key in localStorage)，但要加 hasOwnProperty 判断（防原型污染）

基本上就这些。不复杂但容易忽略类型转换和 null 处理，写的时候多留心字符串和 JSON 的来回转换。

理论要掌握，实操不能落！以上关于《JavaScript本地存储使用详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！