17370845950

JavaScript页面跳转首选location.href或location.assign()以保留返回记录，location.replace()适用于无需返回的场景；传参优先用URLSearchParams配合encodeURIComponent编码查询参数，复杂状态存sessionStorage或localStorage，并注意异常处理与安全性。

JavaScript 实现页面跳转主要有三种常用方式：location.href、location.assign() 和 location.replace()。传递参数通常用 URL 查询字符串（query string）或 sessionStorage / localStorage，而保存状态则推荐结合 URL 参数与浏览器存储机制，兼顾可分享性与持久性。

跳转方式选哪个？关键看是否保留返回记录

三种跳转方法行为不同，影响用户点击“返回”按钮的体验：

• location.href = 'page.html' 或 location.assign('page.html')：会把新页面加入浏览器历史栈，用户可点返回回到原页；
• location.replace('page.html')：用新页面替换当前页，不留下历史记录，适合登录后跳首页、表单提交后跳成功页等场景；
• 注意：window.location = 'xxx' 等价于 location.href，但语义不如后者清晰。

传参推荐：URL 查询参数 + 编码处理

最通用、可书签、可分享的方式是拼接 query string，尤其适合简单数据（如 ID、分类、分页号）：

• 用 URLSearchParams 构建和读取参数，避免手动拼接出错；
• 中文或特殊字符必须用 encodeURIComponent() 编码，否则可能破坏 URL 结构；
• 示例跳转：location.href = 'detail.html?id=123&name=' + encodeURIComponent('张三');
• 在目标页读取：const params = new URLSearchParams(location.search); console.log(params.get('id'));

保存较复杂状态：sessionStorage 或 localStorage

当要传对象、数组或多字段数据，或需跨跳转保持临时状态（如筛选条件、未提交表单），URL 不够用，可用浏览器存储：

• sessionStorage：标签页关闭即清空，适合单次流程（如多步表单）；
• localStorage：长期保存，适合用户偏好、主题设置等；
• 写入：sessionStorage.setItem('filters', JSON.stringify({ category: 'book', sort: 'date' }));
• 读取：const filters = JSON.parse(sessionStorage.getItem('filters') || '{}');
• 注意：不要存敏感信息，且需处理 null 或解析失败异常。

进阶建议：组合使用更健壮

实际项目中常混合使用，兼顾可追溯性与灵活性：

• 用 URL 参数传核心路由标识（如 user/123），保证链接可直达；
• 用 sessionStorage 存辅助状态（如折叠面板展开项、搜索关键词高亮位置）；
• 跳转前先存再跳：sessionStorage.setItem('fromSearch', 'true'); location.href = 'result.html?q=js';
• 目标页优先读 URL 参数，缺失时再 fallback 到存储值，增强容错性。

不复杂但容易忽略细节：编码、历史栈管理、存储异常处理。按需组合 URL 传参与 sessionStorage，就能覆盖大多数跳转+状态传递需求。