HTML5本地存储怎么用_HTML5localStorage和sessionStorage的使用方法

localStorage持久存储数据，sessionStorage仅在会话期间有效；二者均基于同源策略，但sessionStorage限于单标签页，常用于临时数据如表单内容，而localStorage适合长期缓存用户偏好等信息。

HTML5 提供了两种本地存储方式：localStorage 和 sessionStorage，它们让网页能在用户浏览器中保存数据，比传统的 Cookie 更方便、容量更大。下面详细介绍它们的使用方法和区别。

localStorage 的基本用法

localStorage 用于长期保存数据，除非手动清除，否则数据不会过期。

常用操作包括：

• 保存数据：使用 localStorage.setItem(key, value) 方法。例如：
  localStorage.setItem('username', '张三');
• 读取数据：使用 localStorage.getItem(key)。例如：
  let name = localStorage.getItem('username');
• 删除数据：使用 localStorage.removeItem(key)。例如：
  localStorage.removeItem('username');
• 清空所有数据：使用 localStorage.clear();

注意：localStorage 只能存储字符串。如果要存对象，需先转换为 JSON 字符串：

立即学习“前端免费学习笔记（深入）”；

Booltool

常用AI图片图像处理工具箱

140

查看详情

sessionStorage 的基本用法

sessionStorage 与 localStorage 接口一致，但生命周期不同 —— 数据仅在当前会话有效，关闭浏览器标签页后自动清除。

常见用途包括保存表单临时输入、页面状态等。

• 保存数据：sessionStorage.setItem('tempData', '临时内容');
• 获取数据：sessionStorage.getItem('tempData');
• 删除数据：sessionStorage.removeItem('tempData');
• 清空会话数据：sessionStorage.clear();

localStorage 和 sessionStorage 的区别

• 生命周期：localStorage 持久保存，sessionStorage 在页面会话结束时清除。
• 作用域：两者都基于同源策略（同协议、域名、端口），但 sessionStorage 还限制在同一个标签页内。
• 适用场景：localStorage 适合长期缓存（如用户偏好），sessionStorage 适合临时数据（如购物车未结算信息）。

注意事项和兼容性

• 大多数现代浏览器都支持，但在使用前可简单判断是否可用：
  if (typeof(Storage) !== "undefined") { /* 可以使用 */ }
• 存储大小一般为 5~10MB，具体取决于浏览器。
• 不能跨域访问，且数据始终属于字符串类型，复杂类型需序列化。
• 敏感信息不建议明文存储，存在 XSS 风险。

基本上就这些。掌握 setItem、getItem、removeItem 和 clear 这四个方法，就能熟练使用 HTML5 的本地存储功能。根据实际需求选择 localStorage 或 sessionStorage，能有效提升用户体验。

以上就是HTML5本地存储怎么用_HTML5localStorage和sessionStorage的使用方法的详细内容，更多请关注php中文网其它相关文章！