localStorage是最直接的跨页持久化手段，需跳转前写入、新页加载后立即读取并及时清理；sessionStorage适合单次跳转临时传参，按标签页隔离；URL参数仅适用于轻量非敏感字段；单页应用应优先使用框架路由传参，持久化需求仍需localStorage兜底。
跳转时用 localStorage 保存数据再读取
页面跳转本身不保留 JS 内存数据，localStorage 是最直接的跨页持久化手段。关键不是“怎么传”，而是“什么时候写、什么时候读”——必须在跳转前写入，新页面加载后立即读取。
- 原页面跳转前执行：
localStorage.setItem('userToken', token)、localStorage.setItem('formData', JSON.stringify(data)) - 目标页面
DOMContentLoaded或mounted阶段立刻读：const data = JSON.parse(localStorage.getItem('formData') || 'null') - 读完建议立即
localStorage.removeItem('formData')，避免脏数据残留（尤其表单重复提交场景）
sessionStorage 更适合单次跳转临时传参
如果只是 A → B 一次跳转，且 B 页面关掉后数据就该失效，sessionStorage 比 localStorage 更安全——它自动按标签页隔离，关掉标签页即清空，不用手动清理。
- A 页面：
sessionStorage.setItem('redirectFrom', 'search')+window.location.href = '/result.html' - B 页面：
const from = sessionStorage.getItem('redirectFrom')，拿到后可直接用，无需担心跨会话污染 - 注意：新开窗口（
window.open）或 iframe 中的sessionStorage不共享，仅同标签页内有效
别用 location.search 传敏感或大体积数据
URL 参数看似简单，但实际限制多：长度受浏览器限制（Chrome 约 2MB，但服务端常截断在 2KB）、明文暴露、编码麻烦、不支持对象嵌套。
- 只适合传 ID、状态码等轻量、非敏感字段，例如：
/detail.html?id=123&tab=comments - 传 JSON 字符串？得
encodeURIComponent(JSON.stringify(obj))，解码后还要JSON.parse，出错概率高 - 用户手动刷新或分享链接时，参数还在，但原始页面状态已丢失，容易导致逻辑错乱
Vue/React 跳转时绕不开路由参数和状态管理
单页应用里，window.location.href 硬跳会丢失整个应用上下文，应优先走框架路由传参机制。
立即学习“前端免费学习笔记（深入）”；
- Vue Router：
this.$router.push({ path: '/order', query: { orderId: 1001 } })，目标页用this.$route.query.orderId取 - React Router v6：
navigate('/profile', { state: { user: userData } })，目标页用useLocation().state获取（注意：该 state 不持久，刷新即丢） - 真正需要持久+跨刷新的，还是得兜底到
localStorage，比如登录态、筛选条件
JSON.stringify，取的时候必须 JSON.parse 并做好异常捕获——JSON.parse(null) 会报错，getItem 返回 null 时不能直接 parse。 
