在 JS 中添加 URL 参数而不更改页面

【问题标题】：Adding an URL parameter in JS without changing page在 JS 中添加 URL 参数而不更改页面
【发布时间】：2019-02-16 17:06:23
【问题描述】：

最近我不得不在 JavaScript 中以编程方式添加一个 URL 参数。要求是参数应该改变但页面不应该刷新。这样做是为了在用户刷新页面时帮助保持浏览器状态。

如果以后有人遇到这个问题，我想我会分享我的解决方案。

【问题讨论】：

如果您对该问题有什么不满意的地方，请向我提供反馈。
反对票可能是因为这不是一个问题。能否麻烦您重新措辞一下，就好像您在写它时不知道答案一样？

标签： javascript url browser-history

【解决方案1】：

我使用历史对象replaceState() 函数来替换位置的urlParameter 部分。该功能在大多数新浏览器中都可用。

/**
* Add url parameters to your current location without changing page
* @param { object } urlParams, a hash containing key value pairs
*/
function addUrlParams(urlParams){
  var oldState = history.state;
  var oldTitle= document.title;
  var oldParams= `${window.location.hash}${location.search}`; // Keep the old params      
  var newParams='';
  var paramKeys = Object.keys(urlParams);
  var paramValues = Object.values(urlParams)

  for(var i=0;i < paramKeys.length;i++){
    newParams += `&${paramKeys[i]}=${paramValues[i]}`; // Add each param from the hash
  }
  history.replaceState(oldState,oldTitle,oldParams+newParams)
}

希望你觉得它有用。

【讨论】：