url查询参数传参最直接，本质是http协议约定的url查询字符串，需用encodeuricomponent()编码、urlsearchparams解析，仅适用于少量非敏感字符串数据。
用 URL 查询参数传参最直接
浏览器地址栏本身就是天然的参数载体，location.search 能直接读取问号后的内容。适合传少量、非敏感、可被用户看到和分享的数据，比如分页页码、搜索关键词、商品 ID。
发送方只需拼接 URL：
const productId = 123;
window.location.href = `detail.html?pid=${encodeURIComponent(productId)}`;
接收方在 detail.html 中解析：
const urlParams = new URLSearchParams(window.location.search);
const pid = urlParams.get('pid'); // → '123'（字符串）
注意点：
-
encodeURIComponent()必须用——否则空格、中文、斜杠等会破坏 URL 结构 -
URLSearchParams.get()返回的是字符串，数字需手动转：parseInt(pid, 10) - 参数暴露在地址栏，不能传密码、token 等敏感信息
用 sessionStorage 传复杂数据
当要传对象、数组或长文本，又不想出现在 URL 里时，sessionStorage 是轻量级首选。它在当前标签页会话期间有效，关闭标签即清空，不跨域共享。
发送方存入：
const userData = { name: '张三', roles: ['editor', 'viewer'] };
sessionStorage.setItem('userContext', JSON.stringify(userData));
接收方读取：
const dataStr = sessionStorage.getItem('userContext');
const userData = dataStr ? JSON.parse(dataStr) : null;
关键限制：
- 只能在同源页面间使用（
https://a.com/page1.html→https://a.com/page2.html可行；→https://b.com不行） - 值必须是字符串，对象/数组需
JSON.stringify()+JSON.parse() - 若用户新开标签页访问目标页（非跳转），
sessionStorage不继承
避免用 localStorage 做页面跳转传参
虽然 localStorage 也能存取，但它生命周期太长（除非手动清除），容易造成状态残留和误读。例如用户从 A 页跳 B 页传了参数，再从 C 页打开 B 页，B 页仍会读到旧的 localStorage 值。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
更麻烦的是清理时机难把握：你没法知道用户什么时候“离开”A 页上下文。除非业务明确需要跨会话持久化（如记住上次筛选条件），否则不要把它当跳转参数通道。
如果真要用，至少加前缀隔离：
localStorage.setItem('pageB_fromA_pid', '456');
但依然推荐优先走 sessionStorage 或 URL 参数。
跨域或 SPA 场景下考虑 postMessage
两个页面不在同一域名下（比如嵌套了第三方 iframe），或你用的是单页应用（SPA）中通过路由切换模拟“页面跳转”，这时 URL 和 Storage 都失效，得用 postMessage。
主页面发消息给 iframe：
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage({ type: 'NAVIGATE', payload: { tab: 'settings' } }, 'https://third-party.com');
iframe 内监听：
window.addEventListener('message', (e) => {
if (e.origin !== 'https://your-site.com') return;
if (e.data.type === 'NAVIGATE') {
console.log(e.data.payload); // → { tab: 'settings' }
}
});
这个方式灵活但责任重：必须校验 e.origin，否则有 XSS 风险；消息是异步的，无法保证接收方已就绪；且只适用于你知道目标窗口引用的场景（比如自己创建的 iframe 或 window.open() 的子窗口）。
真正复杂的跨页面通信，往往意味着架构该收敛状态了——比如抽离到顶层状态管理或后端 session，而不是靠前端硬传。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
