localStorage持久存储，跨标签页共享；sessionStorage仅限当前标签页，会话结束即清除。两者均遵循同源策略，操作API相同，适用于不同场景：前者用于长期保存用户配置或token，后者适合临时表单数据或敏感信息。
HTML5 Web Storage 提供了在浏览器中本地存储数据的机制，相比传统的 Cookie，它拥有更大的存储空间和更简便的操作方式。其中最常用的两种存储方式是 localStorage 和 sessionStorage。虽然它们用法相似，但在生命周期、作用域等方面存在关键区别。
1. 数据生命周期的区别
localStorage 用于长期保存数据，除非用户手动清除浏览器缓存或通过代码删除，否则数据会一直存在，即使关闭浏览器或重启设备也不会丢失。
sessionStorage 只在当前会话期间有效，一旦关闭浏览器标签页或窗口，数据就会被自动清除。
举例：使用 localStorage 存储用户的主题偏好，刷新或重新打开页面后仍能保持；而 sessionStorage 可用于保存表单临时输入内容，在用户离开页面后自动清理。2. 作用域（访问范围）不同
两者都遵循同源策略，即只有在相同协议、域名和端口下才能访问同一份存储数据。
立即学习“前端免费学习笔记（深入）”；
但具体作用域有差异：
- localStorage 的作用域是**整个域名**，所有同源页面共享同一份数据。
- sessionStorage 的作用域限定在**当前浏览器标签页**内，即使打开多个同源页面，每个标签页都有独立的 sessionStorage。
3. 常见用法与API操作
两者的操作方法完全相同，支持以下常用方法：
- setItem(key, value)：存储数据
- getItem(key)：获取数据
- removeItem(key)：删除指定数据
- clear()：清空所有数据
- key(index)：获取指定索引的键名
示例代码：
// 存储数据
localStorage.setItem('username', 'Alice');
sessionStorage.setItem('tempData', 'draft');
// 读取数据
let user = localStorage.getItem('username');
let draft = sessionStorage.getItem('tempData');
// 删除数据
localStorage.removeItem('username');
// 清空全部
sessionStorage.clear();
4. 使用场景建议
根据特性选择合适的存储方式：
- 使用 localStorage 适合长期保存用户配置、登录状态（如 token）、离线数据缓存等需要持久化的信息。
- 使用 sessionStorage 更适合处理敏感或临时数据，比如多步骤表单的中间状态、一次性验证码、防止页面刷新丢失临时内容等。
基本上就这些。localStorage 和 sessionStorage 各有用途，理解它们的差异有助于更好地管理前端数据状态。不复杂但容易忽略细节。
