HTML5 localStorage提供客户端持久化存储,支持setItem()/点号赋值存字符串、getItem()/方括号语法读取、及length+key()遍历全部键值对。

如果您需要在网页中保存用户数据且不依赖服务器,HTML5 的 localStorage 提供了一种简单、持久的客户端存储机制。以下是实现 localStorage 数据设置与读取的多种方法:
一、使用 setItem() 方法存储字符串数据
localStorage 只接受字符串作为值,setItem() 是标准写入方式,适用于键值对形式的单条数据存储。
1、在 JavaScript 中调用 localStorage.setItem(key, value),其中 key 为字符串类型的键名,value 必须为字符串。
2、若需存储对象或数组,先使用 JSON.stringify() 将其序列化为字符串。
立即学习“前端免费学习笔记(深入)”;
3、执行后数据将持久保存在浏览器中,关闭页面或重启浏览器后仍可访问。
二、使用点号语法直接赋值存储
localStorage 支持类似对象属性的点号赋值方式,语法更简洁,但兼容性与语义清晰度略低于 setItem()。
1、直接写入 localStorage.keyName = "value",其中 keyName 为自定义键名。
2、该操作等效于 setItem("keyName", "value"),同样要求 value 为字符串类型。
3、若赋值为非字符串(如数字、布尔值),浏览器会自动调用 toString() 转换,但不推荐依赖隐式转换。
三、使用 getItem() 方法读取指定键的数据
getItem() 是标准读取方式,用于根据键名获取对应存储的字符串值,返回 null 表示键不存在。
1、调用 localStorage.getItem(key),传入已存在的键名。
2、若原数据为 JSON 字符串,需用 JSON.parse() 还原为对象或数组。
3、读取结果始终为字符串,即使原始赋值是数字或布尔字面量,也需手动转换类型。
四、使用方括号语法读取数据
localStorage 支持类似数组索引的方括号访问方式,适用于动态键名或变量作为键的场景。
1、使用 localStorage["keyName"] 获取对应值,效果等同于 getItem("keyName")。
2、当键名来自变量时,例如 let k = "userPref"; localStorage[k],此方式更灵活。
3、若键不存在,返回 undefined 而非 null,需注意类型判断差异。
五、批量读取所有键值对并遍历
localStorage 不提供内置的 for...of 或 Object.keys() 遍历支持,需结合 length 与 key() 方法手动提取全部数据。
1、通过 localStorage.length 获取当前存储项总数。
2、使用 localStorage.key(index) 获取指定索引位置的键名。
3、对每个键名调用 localStorage.getItem(key) 获取对应值,完成全量读取。










