sessionStorage是HTML5提供的会话级本地存储机制，数据仅在当前浏览器标签页生命周期内有效，页面刷新不丢失，关闭标签页后自动清除；适用于暂存登录态、表单草稿等临时数据，作用域严格限定于同源同标签页。
SessionStorage 是浏览器提供的本地存储机制，它在同一个浏览器标签页（tab）的生命周期内有效，页面刷新不丢失，但关闭标签页后自动清除。它非常适合保存当前会话 ID（如登录后返回的 sessionId 或 token），用于多页面间传递，而无需反复请求服务端或依赖 Cookie。
一、在登录成功后将 sessionId 存入 sessionStorage
假设你通过 AJAX 登录获取到服务端返回的会话 ID（比如字段名为 sessionId 或 token），可在 JS 中直接写入：
// 登录响应处理示例
fetch('/api/login', { method: 'POST', body: formData })
.then(res => res.json())
.then(data => {
if (data.success) {
// 将 sessionId 保存到 sessionStorage
sessionStorage.setItem('sessionId', data.sessionId);
// 跳转到首页或其他页面
location.href = '/dashboard.html';
}
});
二、在其他页面中读取并使用 sessionId
只要在同一个标签页中打开的新页面（如 /dashboard.html、/profile.html），都可以安全读取该值：
// 任意后续页面中
const sessionId = sessionStorage.getItem('sessionId');
if (!sessionId) {
// 会话已失效，跳转登录页
location.href = '/login.html';
exit;
}
// 发起需要认证的请求时带上
fetch('/api/user/info', {
headers: {
'X-Session-ID': sessionId // 或放在 Authorization header 中
}
});
三、注意 SessionStorage 的作用域限制
SessionStorage 不跨 tab、不跨域名、不跨协议（http/https）、也不跨子域名：
- ✅ 同一 tab 内：a.html → b.html → c.html 可共享
- ❌ 新开 tab 打开 a.html：无法读取原 tab 的 sessionStorage
- ❌ http://site.com 和 https://site.com 视为不同源，互不可见
- ❌ site.com 和 app.site.com 默认隔离（除非显式设置 document.domain，但现代浏览器已限制）
四、配合页面跳转与路由做轻量会话管理
如果你用的是前端路由（如原生 history.pushState 或简易 SPA），可统一在路由守卫中检查 sessionId：
// 简单的路由拦截逻辑（伪代码）
function navigateTo(path) {
const sid = sessionStorage.getItem('sessionId');
if (!sid && !path.startsWith('/login')) {
location.href = '/login.html';
return;
}
// 正常跳转或更新视图
history.pushState({}, '', path);
renderPage(path);
}
这样能避免用户手动输入 URL 绕过登录检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
