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，就能覆盖大多数跳转+状态传递需求。
