如何避免window.location传递经纬度时出现无限循环问题？

问题原因 #

你的代码在页面每次加载时都会执行跳转操作，无论当前URL是否已经包含lat和lng参数，导致页面反复刷新，形成无限循环。

解决方案 #

核心思路是先判断当前URL是否已经携带目标参数（且参数值匹配），仅在不满足条件时才执行跳转，同时要确保sessionStorage中确实存在有效的坐标值：

// 从sessionStorage读取坐标
const lat = sessionStorage.getItem('lat');
const lng = sessionStorage.getItem('lng');

// 仅当坐标存在有效值时继续
if (lat && lng) {
  // 解析当前URL的查询参数
  const currentParams = new URLSearchParams(window.location.search);
  
  // 判断当前URL是否已包含相同的lat和lng参数
  if (currentParams.get('lat') !== lat || currentParams.get('lng') !== lng) {
    // 更新查询参数
    currentParams.set('lat', lat);
    currentParams.set('lng', lng);
    // 修改URL查询部分并触发跳转（不会新增历史记录条目）
    window.location.search = currentParams.toString();
  }
}

关键细节说明 #

• 使用URLSearchParams可以便捷地读取、修改URL查询参数，避免手动拼接字符串的繁琐和错误
• 增加lat && lng的判断，防止sessionStorage中无值时执行无效跳转
• 通过对比当前参数与sessionStorage的值，仅在参数不一致时才更新，彻底避免无限循环
• 直接修改window.location.search比赋值整个location更精准，仅更新查询参数部分

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