如何用 window.name 作为一个轻量级的跨页面存储替代方案-js教程-PHP中文网

window.name 是浏览器中生命周期与窗口绑定的全局字符串属性，页面跳转、刷新及跨域时均不丢失，适合轻量级跨页面数据传递，但不可存储敏感信息。

如何用 window.name 作为一个轻量级的跨页面存储替代方案

window.name 是浏览器中一个长期被忽视但非常实用的特性：它是一个全局属性，生命周期与窗口（或标签页）绑定，**在页面跳转、刷新甚至跨域时都不会被清空**（除非用户关闭标签页或显式赋值为空）。这使得它能作为轻量级、无 Cookie、无需后端配合的跨页面数据传递方案，尤其适合单页应用跳转、登录态透传、表单草稿暂存等场景。

window.name 的核心特点

• 值始终为字符串类型，需手动序列化/反序列化（推荐 JSON.stringify 和 JSON.parse）
• 同一窗口（包括 iframe）内所有页面共享同一个 window.name，不受同源策略限制
• 页面刷新、location.href 跳转、history.pushState 不会重置它
• 关闭标签页或调用 window.close() 后才会丢失
• 安全性较低：任何脚本都能读写，**不可存储敏感信息（如 token、密码）**

典型使用方式：跳转前存 + 跳转后取

假设从 A 页面跳转到 B 页面，并希望把用户填写的部分表单数据带过去：

A 页面（跳转前）：

const data = { userId: 123, draft: "未完成的留言..." };
window.name = JSON.stringify(data);
location.href = "/b.html"; // 或 window.location.assign()

B 页面（加载后立即读取）：

// 注意：必须在页面初始化早期读取，避免被其他脚本覆盖
let storedData;
try {
  storedData = JSON.parse(window.name || "{}");
} catch (e) {
  storedData = {};
}
console.log(storedData); // { userId: 123, draft: "未完成的留言..." }
// ✅ 使用完可清空（可选）
window.name = "";

注意事项与避坑指南

• 不要依赖 onload 或 DOMContentLoaded 之后再读：某些框架（如 Vue/React）初始化较晚，而第三方脚本可能提前改写 window.name，建议在 <script></script> 标签中尽早执行读取逻辑
• 避免污染全局：多个功能共用 window.name 易冲突，建议加命名空间，例如：
window.name = JSON.stringify({ loginFlow: { token: "...", redirect: "/" }, formDraft: { ... } });
• iframe 场景要小心：若页面含 iframe，子帧也能读写父帧的 window.name（通过 parent.window.name），需注意权限和隔离
• 不适用于 PWA 离线缓存或 Service Worker 场景：它不持久化，关闭即失，仅限“当前会话内跨页面”