在浏览器端实现数据持久化，Web Storage是最轻量的方案。LocalStorage与SessionStorage接口几乎一致，差异集中在生命周期与可见范围，理解它们能帮助开发者在正确场景使用正确工具。
一、基本概念与API共性
LocalStorage和SessionStorage都是HTML5提供的客户端存储机制，挂载在window对象下，统一称为Web Storage。它们以键值对形式保存数据，键和值都必须是字符串，因此存储对象时需要先用JSON.stringify处理。
二者共享同一套同步API，常用方法包括setItem、getItem、removeItem和clear。由于是同步操作，大量读写会阻塞主线程，但日常小数据交互完全够用。下面的代码演示了如何封装一个通用的存储工具，同时兼容两种存储类型。
// 通用存储封装，type可选 local 或 session
function createStorage(type) {
var engine = type === 'session' ? window.sessionStorage : window.localStorage;
return {
set: function (key, value) {
// 对象转字符串
var str = typeof value === 'object' ? JSON.stringify(value) : String(value);
engine.setItem(key, str);
},
get: function (key) {
var raw = engine.getItem(key);
if (!raw) return null;
try {
return JSON.parse(raw);
} catch (e) {
return raw;
}
},
remove: function (key) {
engine.removeItem(key);
},
clearAll: function () {
engine.clear();
}
};
}
var local = createStorage('local');
var session = createStorage('session');
local.set('user', { name: '张三', id: 1 });
session.set('temp_form', '未完成的内容');
上述封装把类型差异隐藏在创建阶段，业务层调用时无需关心底层是哪种存储。不过要注意，如果浏览器处于隐私模式，部分移动端WebView可能禁止写入，因此生产环境应包裹try-catch避免抛出异常。
二、生命周期与标签页隔离机制
LocalStorage的数据没有过期时间，写入后只要用户不手动清除、脚本不执行removeItem或clear，数据会一直存在，即便关闭浏览器再打开也还在。这种特性适合存放长期配置，比如界面主题、是否同意过弹窗协议。
SessionStorage则严格绑定于单个标签页会话。当用户新建标签页、或从书签重新打开站点，即便域名相同，也会得到独立的SessionStorage空间。一旦标签页关闭，其中所有SessionStorage数据立即销毁。下面的示例展示了这一隔离现象。
<!-- 页面A：写入session -->
<script>
sessionStorage.setItem('tab_id', 'A' + Date.now());
document.write('当前标签session: ' + sessionStorage.getItem('tab_id'));
</script>
<!-- 从页面A中点击链接新建标签页打开本页，会显示不同的tab_id -->
很多初学者误以为同域下SessionStorage共享，结果在标签页间传递临时状态失败。实际上，只有通过JavaScript的window.open或链接带target="_blank"且未加rel="noopener"时，新页才可能继承原页的SessionStorage，但这属于特殊拷贝行为，并非实时同步。
三、容量限制与安全边界
绝大多数浏览器为单个源的Web Storage分配约5MB空间，超出会触发QuotaExceededError。与Cookie相比，Storage不随请求自动发送到服务器，因此更适合存纯客户端状态，但也意味着不能用于身份认证凭据的自动携带。
由于数据以明文存于本地，任何能打开开发者工具的人都能读取修改，所以绝对不能放密码、token等敏感信息。如果必须暂存，建议加密且缩短有效期。下表列出核心差异：
| 对比项 | LocalStorage | SessionStorage |
|---|---|---|
| 生命周期 | 永久，除非代码或用户清除 | 仅当前标签页会话期间 |
| 跨标签页共享 | 同源所有标签页共享 | 不共享，各自独立 |
| 典型用途 | 用户偏好、离线缓存标记 | 表单草稿、单页步骤状态 |
| 容量 | 约5MB | 约5MB |
当页面需要感知其他标签页对LocalStorage的修改时，可监听storage事件，该事件仅在非当前修改页触发，适合做多页同步主题切换。SessionStorage由于不跨页，因此没有此机制。
四、实践中的选型建议
如果业务要求用户关闭重进后依然保留某些设置，例如“七天内免提示”，就选用LocalStorage。但如果只是多步表单中防止刷新丢失，用SessionStorage更安全，用户关掉误填的页面后不会留下垃圾数据。
下面是一段在Vue或原生项目中都适用的暂存逻辑，利用SessionStorage避免重复请求，同时LocalStorage记住筛选偏好。
// 记住用户上次的列表筛选条件
function saveFilter(filterObj) {
localStorage.setItem('list_filter', JSON.stringify(filterObj));
}
function loadFilter() {
var f = localStorage.getItem('list_filter');
return f ? JSON.parse(f) : null;
}
// 单页操作中的临时高亮，关页即清
function markTempActive(id) {
sessionStorage.setItem('active_id', id);
}
合理搭配两者，既能提升体验又降低维护成本。当存储结构变复杂、需要查询或过期管理时，才考虑升级到IndexedDB，但Web Storage仍是大多数项目首选的起步方案。
LocalStorageSessionStoragejavascript_storage修改时间：2026-08-10 02:45:13