在HTML5标准中，Web Storage提供了两种浏览器端数据存储机制，分别是localStorage和sessionStorage。它们都属于window对象下的属性，能够通过简单的键值对方式保存字符串数据，用来弥补传统cookie容量小、操作不便的问题。理解这两种存储的差异，是前端开发中的基础能力。
一、localStorage与sessionStorage的核心区别
虽然两者用法几乎一致，但在生命周期和共享范围上有明显不同。可以通过以下表格快速了解：
| 对比项 | localStorage | sessionStorage |
|---|---|---|
| 生命周期 | 永久保存，除非代码或用户清除 | 仅当前标签页会话，关闭即清除 |
| 标签页共享 | 同源下所有标签页共享 | 仅当前标签页独立，不可共享 |
| 存储大小 | 一般约5MB | 一般约5MB |
| 适用场景 | 用户 token、主题设置 | 表单草稿、临时状态 |
二、基本用法示例
两者的API完全一样，下面以localStorage为例展示常见的增删改查操作，sessionStorage只需替换对象名。
1. 写入与读取数据
// 写入数据
localStorage.setItem('username', 'zhangsan');
// 读取数据
var name = localStorage.getItem('username');
console.log(name); // 输出 zhangsan
// 写入对象需要转为字符串
var user = { id: 1, age: 20 };
localStorage.setItem('user', JSON.stringify(user));
// 读取对象需解析
var data = JSON.parse(localStorage.getItem('user'));
console.log(data.id);
2. 删除与清空
// 删除指定键
localStorage.removeItem('username');
// 清空所有localStorage
localStorage.clear();
// sessionStorage写法完全一致
sessionStorage.setItem('temp', '123');
sessionStorage.removeItem('temp');
三、使用时的注意事项
- 存储内容只能是字符串，复杂数据需用JSON方法转换。
- 不要在本地存储中放敏感信息，如明文密码，因为用户可随时在开发者工具中查看。
- 同源策略限制：不同协议或域名下的页面无法互相访问存储数据。
- 部分浏览器在无痕模式下可能对sessionStorage支持异常，需要做兼容判断。
四、如何选择存储方式
如果希望用户下次打开网站时依然保留信息，例如深色模式开关、登录凭证，请使用localStorage。如果只是页面刷新前临时保存步骤数据，或者多步表单防止误刷新丢失，使用sessionStorage更合适。合理运用HTML5 Web Storage可以让前端状态管理更轻量，减少不必要的接口请求。
注意：文中提到的<input>等表单标签的数据，也可以先暂存到sessionStorage，待提交时一并读取，提升体验。
五、简单页面演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>存储示例</title>
</head>
<body>
<input type="text" id="msg" placeholder="输入内容">
<button onclick="save()">保存到session</button>
<script>
function save() {
var val = document.getElementById('msg').value;
sessionStorage.setItem('draft', val);
alert('已保存');
}
</script>
</body>
</html>
通过上述说明和代码，你可以清晰区分HTML5中localStorage和sessionStorage的不同，并在项目中正确落地使用。
localStoragesessionStorageHTML5_Web_Storage修改时间：2026-07-28 12:21:23