HTML5提供localStorage和sessionStorage两种客户端存储机制：localStorage持久保存数据，sessionStorage仅限当前标签页会话；二者均需字符串值、支持同源策略、有约5MB容量限制且须检测浏览器兼容性。
如果需要在网页中保存少量数据到用户本地设备，HTML5 提供了 localStorage 和 sessionStorage 两种内置的客户端存储机制。以下是使用这两种方式存储数据的具体操作方法：
一、使用 localStorage 持久化存储数据
localStorage 将数据以字符串形式保存在浏览器中，数据不会因页面关闭或浏览器重启而丢失，除非用户手动清除或通过脚本删除。
1、在 JavaScript 中调用 window.localStorage.setItem(key, value) 方法，传入键名和字符串值。
2、确保 value 是字符串类型，如需存储对象，必须先用 JSON.stringify() 转换为字符串。
立即学习“前端免费学习笔记（深入）”；
3、读取时使用 window.localStorage.getItem(key) 获取对应键的值。
4、删除指定键值对可调用 window.localStorage.removeItem(key)。
5、清空所有 localStorage 数据可执行 window.localStorage.clear()。
二、使用 sessionStorage 临时会话存储数据
sessionStorage 的作用域限定于当前浏览器标签页，数据仅在该标签页存活期间有效，关闭标签页后自动销毁。
1、通过 window.sessionStorage.setItem(key, value) 存储键值对，用法与 localStorage 完全一致。
2、同样要求 value 必须是字符串，对象需经 JSON.stringify() 序列化后再存入。
3、读取使用 window.sessionStorage.getItem(key)，返回对应键的字符串值。
4、删除单个条目使用 window.sessionStorage.removeItem(key)。
5、清空当前会话所有数据可调用 window.sessionStorage.clear()。
三、检查浏览器是否支持 Storage API
并非所有旧版浏览器都支持 localStorage 或 sessionStorage，应在使用前检测其可用性，避免运行时错误。
1、使用 typeof window.localStorage !== 'undefined' 判断 localStorage 是否存在。
2、使用 typeof window.sessionStorage !== 'undefined' 判断 sessionStorage 是否存在。
3、若任一判断返回 false，说明当前环境不支持该存储方式，应降级处理或提示用户。
4、可在脚本开头统一封装检测逻辑，例如定义 const supportsStorage = () => typeof localStorage === 'object'。
四、处理存储容量限制与异常
大多数浏览器对 localStorage 和 sessionStorage 设定约 5MB 的存储上限，超出将触发 QuotaExceededError 异常。
1、在调用 setItem 前，可尝试捕获异常：try { localStorage.setItem(k, v); } catch (e) { if (e.name === 'QuotaExceededError') {...} }。
2、检查当前已用空间可通过遍历所有键并累加 localStorage.getItem(key).length 估算字节数（注意 UTF-16 编码影响）。
3、当接近容量上限时，建议优先调用 localStorage.removeItem() 清理过期或冗余数据。
4、避免直接向 localStorage 写入未截断的长文本或 Base64 图片字符串，防止意外超限。
五、安全注意事项与数据隔离规则
localStorage 和 sessionStorage 遵循同源策略，即只有相同协议、域名和端口的页面才能共享或访问彼此的存储数据。
1、http://example.com 与 https://example.com 视为不同源，存储空间完全隔离。
2、example.com 与 sub.example.com 也属于不同源，无法互相读写。
3、不要在 localStorage 中存储敏感信息（如密码、token），因其可被同源任意脚本读取，且无加密机制。
4、若需持久化认证状态，应结合服务端 session 或短期有效的 HttpOnly Cookie 实现更安全的方案。
