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 字符串：
立即学习“前端免费学习笔记（深入）”；
localStorage.setItem('user', JSON.stringify({name: '张三', age: 25}));let userData = JSON.parse(localStorage.getItem('user'));
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，能有效提升用户体验。
