html5怎样用localstorage存数据_html5本地存储设置与读取方法【方法】_网络技术

发布时间 - 2026-01-08 00:00:00 点击率：次

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() 是标准读取方式，用于根据键名获取对应存储的字符串值，返回 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) 获取对应值，完*量读取。