html5提供的Web Storage API包含localStorage和sessionStorage两种存储方式，它们都用于在客户端浏览器中保存数据，避免频繁向服务器请求数据，提升页面加载效率，但两者在多个核心特性上存在明显差异。
一、核心差异对比
两者的核心区别可以通过下表直观查看：
| 对比维度 | localStorage | sessionStorage |
|---|---|---|
| 存储生命周期 | 永久存储，除非手动删除 | 仅在当前会话有效，关闭标签页或浏览器后清除 |
| 作用域 | 同源的所有标签页、窗口共享 | 仅当前标签页有效，不同标签页即使同源也不共享 |
| 存储容量 | 一般为5MB左右 | 一般为5MB左右 |
| API一致性 | 完全相同 | 完全相同 |
二、存储生命周期详细说明
1. localStorage的生命周期
localStorage的数据一旦写入，会一直保存在浏览器中，不会因为页面刷新、关闭标签页、关闭浏览器而丢失。只有当用户手动在浏览器设置中清除站点数据，或者开发者通过代码调用清除方法时，数据才会被删除。
下面是localStorage的基础操作代码示例：
// 向localStorage写入数据
localStorage.setItem('user_name', '张三');
localStorage.setItem('user_age', '25');
// 读取localStorage中的数据
const name = localStorage.getItem('user_name');
const age = localStorage.getItem('user_age');
console.log(name, age); // 输出 张三 25
// 删除localStorage中的单条数据
localStorage.removeItem('user_age');
// 清空localStorage所有数据
localStorage.clear();
2. sessionStorage的生命周期
sessionStorage的数据仅在当前浏览器标签页的会话期间有效。当用户刷新当前标签页时，数据不会丢失；但如果关闭当前标签页，或者关闭整个浏览器，sessionStorage中保存的所有数据都会被自动清除。另外，不同标签页之间即使是同一个域名，sessionStorage的数据也不会互相共享。
下面是sessionStorage的基础操作代码示例：
// 向sessionStorage写入数据
sessionStorage.setItem('cart_num', '3');
sessionStorage.setItem('temp_token', 'abc123');
// 读取sessionStorage中的数据
const cartNum = sessionStorage.getItem('cart_num');
const tempToken = sessionStorage.getItem('temp_token');
console.log(cartNum, tempToken); // 输出 3 abc123
// 删除sessionStorage中的单条数据
sessionStorage.removeItem('temp_token');
// 清空sessionStorage所有数据
sessionStorage.clear();
三、使用场景区分
根据两者的生命周期和特性，可以选择不同的使用场景：
- 如果需要保存长期有效的数据，比如用户的登录状态、个性化设置、长期保存的浏览偏好，优先选择localStorage。
- 如果只需要保存临时数据，比如表单填写的临时内容、单次会话的临时标识、购物车临时数据，优先选择sessionStorage，避免关闭页面后残留无用数据。
四、注意事项
使用两种存储方式时需要注意以下问题：
- 两者都只能存储字符串类型的数据，如果要存储对象或数组，需要先通过
JSON.stringify()转换为字符串，读取时再通过JSON.parse()转换回原类型。 - 存储容量存在上限，不要存储过大的数据，避免超出限制导致存储失败。
- 不要在存储中保存敏感信息，比如用户密码、支付相关的私密数据，因为客户端存储的数据可以被用户轻易查看和修改。
下面是存储对象的示例代码：
// 存储对象到localStorage
const userInfo = {
id: 1,
name: '李四',
role: 'admin'
};
localStorage.setItem('user_info', JSON.stringify(userInfo));
// 读取并转换回对象
const savedUserInfo = JSON.parse(localStorage.getItem('user_info'));
console.log(savedUserInfo.name); // 输出 李四
localStoragesessionStoragehtml5数据存储修改时间：2026-07-16 18:30:27