window.name跨页存储技巧分享

`window.name` 是一个被长期低估却极其实用的浏览器原生特性——它作为与窗口生命周期绑定的全局字符串属性，在页面跳转、刷新甚至跨域场景下均能完好保留数据，无需 Cookie、不依赖后端、不受同源策略限制，特别适合单页应用中轻量级的跨页状态传递，如登录态透传、表单草稿暂存等；虽需手动序列化且安全性有限（严禁存储敏感信息），但凭借零配额占用、无历史泄露风险、超大容量支持等优势，成为 URL 参数和 localStorage 之外一条简洁高效的“隐形数据通道”。

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，建议在