HTML5框架提供了本地存储能力，让前端可以在用户浏览器中保存数据，不需要每次都向服务器请求数据，提升页面加载速度和用户体验。localStorage和sessionStorage是两种最常用的本地存储方案，二者用法相似但适用场景不同。
localStorage基础用法
localStorage用于长久保存数据，除非手动删除，否则数据会一直存在浏览器中，没有过期时间限制。
数据存储
使用setItem方法可以存储数据，第一个参数是键名，第二个参数是值，值会被自动转换为字符串类型。
// 存储字符串数据
localStorage.setItem('username', '张三');
// 存储对象数据，需要先转为JSON字符串
const user = { id: 1, age: 20 };
localStorage.setItem('userInfo', JSON.stringify(user));
数据读取
使用getItem方法读取数据，传入对应的键名即可，如果键不存在会返回null。
// 读取字符串数据
const username = localStorage.getItem('username');
console.log(username); // 输出 张三
// 读取对象数据，需要转回JSON对象
const userInfoStr = localStorage.getItem('userInfo');
if (userInfoStr) {
const userInfo = JSON.parse(userInfoStr);
console.log(userInfo.id); // 输出 1
}
数据删除
删除单个数据使用removeItem方法，传入键名即可；清空所有localStorage数据使用clear方法。
// 删除指定键的数据
localStorage.removeItem('username');
// 清空所有localStorage数据
localStorage.clear();
sessionStorage基础用法
sessionStorage的用法和localStorage几乎一致，区别在于它的数据只在当前浏览器标签页有效，关闭标签页后数据会自动清除。
常用操作示例
// 存储数据
sessionStorage.setItem('tempToken', 'abc123');
// 读取数据
const tempToken = sessionStorage.getItem('tempToken');
console.log(tempToken); // 输出 abc123
// 删除数据
sessionStorage.removeItem('tempToken');
// 清空所有sessionStorage数据
sessionStorage.clear();
localStorage与sessionStorage核心区别
两者虽然都是HTML5提供的本地存储方案，但在多个维度存在明显差异，具体对比如下：
| 对比维度 | localStorage | sessionStorage |
|---|---|---|
| 生命周期 | 永久存储，除非手动删除或浏览器清除数据，否则一直存在 | 会话级存储，当前标签页关闭后数据自动清除 |
| 作用域 | 同源的所有标签页、窗口共享数据 | 仅在当前标签页内有效，不同标签页即使同源也无法共享 |
| 存储限制 | 一般为5MB左右，不同浏览器略有差异 | 一般为5MB左右，不同浏览器略有差异 |
| 适用场景 | 存储需要长期保存的用户偏好设置、登录状态等 | 存储临时表单数据、单次会话的临时标识等 |
使用注意事项
- 两种存储方式都只能存储字符串类型的数据，存储对象、数组等复杂类型时需要先使用
JSON.stringify转换，读取时再用JSON.parse还原。 - 存储的数据大小不能超过浏览器的限制，否则会抛出错误，存储前可以先判断数据大小。
- 本地存储的数据可以被用户手动清除，也不能存储敏感信息，比如密码、支付密钥等。
- 在浏览器无痕模式下，部分浏览器对sessionStorage和localStorage的支持会有差异，需要做兼容处理。
常见问题解答
如何监听本地存储的变化
当同源页面的localStorage发生变化时，会触发storage事件，可以监听该事件处理数据同步逻辑，sessionStorage变化不会触发该事件。
window.addEventListener('storage', function(e) {
console.log('变化的键名：', e.key);
console.log('变化前的值：', e.oldValue);
console.log('变化后的值：', e.newValue);
});
两种存储方式是否支持所有浏览器
现代浏览器都支持localStorage和sessionStorage，IE浏览器从IE8版本开始支持，如果需要兼容更低版本的IE，需要做特性检测。
// 检测浏览器是否支持localStorage
if (window.localStorage) {
console.log('当前浏览器支持localStorage');
} else {
console.log('当前浏览器不支持localStorage');
}
localStoragesessionStorageHTML5本地存储修改时间：2026-06-22 09:48:45