多页面网站调用REST API的最佳实践及跨页传参方案咨询

核心需求实现（detail页获取产品ID） #

主流有3种可落地的实现方案，优先推荐前两种：

• 方案1：URL路径参数提取（最符合REST规范）
  先配置服务端路由规则，将所有/products/*路径的请求都指向detail.html页面。跳转链接保持你现有的url/products/42格式即可，在detail.html中直接解析当前页面路径拿ID：

  // 从路径中提取最后一段作为产品ID
  const productId = window.location.pathname.split('/').pop()
  // 校验ID合法性后发起请求
  if (/^\d+$/.test(productId)) {
    fetch(`/product/${productId}`).then(res => res.json()).then(data => {
      // 渲染详情页
    })
  }
  

  该方案的优势是URL语义清晰，支持用户收藏、分享详情页链接，打开后仍能正常加载对应产品数据。
• 方案2：URL查询参数提取（静态站点适配成本最低）
  如果你用的是纯静态站点不想修改服务端路由，可以修改index.html中渲染的详情链接格式为detail.html?id=42，在detail.html中通过查询参数解析拿ID：

  const searchParams = new URLSearchParams(window.location.search)
  const productId = searchParams.get('id')
  // 后续请求逻辑和方案1一致
  

  该方案不需要改动服务端配置，纯前端即可实现，适合小型静态站点使用。
• 方案3：会话存储传递（仅作为辅助方案）
  在index.html中用户点击产品链接时，先把ID存入sessionStorage再跳转：

  // index.html 点击事件逻辑
  document.querySelector('.product-link').addEventListener('click', (e) => {
    e.preventDefault()
    const productId = e.target.dataset.productId
    sessionStorage.setItem('currentProductId', productId)
    window.location.href = 'detail.html'
  })
  

  跳转后在detail.html中读取：

  const productId = sessionStorage.getItem('currentProductId')
  

  该方案的缺陷是不支持多标签页打开、不支持链接分享收藏，仅适合特殊场景下配合前两种方案做缓存优化使用。

额外最佳实践建议 #

1. 拿到ID后必须做合法性校验，避免恶意参数导致请求报错或页面异常
2. 对性能要求高的场景，可以在index.html请求到产品列表时，把高频访问的产品详情基础数据存入sessionStorage，detail.html加载时先读缓存渲染，再发起API请求更新数据，降低用户等待时间
3. API请求过程中要加加载状态提示，请求失败时做降级提示，提升用户体验

内容的提问来源于stack exchange，提问作者Philip