使用history.pushState（）更新URL中的参数

我正在使用history.pushState在我的页面上进行AJAX调用后将几个参数附加到当前页面URL。 现在，在基于用户操作的同一页面上，我想使用相同或更多的参数集再次更新页面URL。 所以我的代码看起来像这样：

var pageUrl = window.location.href + "?" + queryString; window.history.pushState('','',pageUrl); 

queryString是我的查询参数列表。

• 例如，我的默认页面url： http ： //sample.com/
• 在同一页面上的第一次AJAX调用之后，URL应该是： http ： //sample.com？param1 = foo＆param2 = bar
• 在同一页面上进行第二次AJAX调用后，URL可以是： http ： //sample.com/？ param1 = foo，foo1＆param2 = bar＆param3 = another_foo

但是使用上面的代码，我的params被附加到带有params的URL，并且在第二次AJAX调用后它们看起来如下所示：

http://sample.com?param1=foo&param2=bar&param1=foo,foo1&param2=bar&param3=another_foo

所以params在URL中出现两次，是否有任何方法可以在推送到History之前替换URL中的params或者在javascript（jquery）中实现此目的的任何其他更好的方法？

Answer 1

我想你需要的是删除window.location.href并留下‘？’ +

 var pageUrl = '?' + queryString; window.history.pushState('', '', pageUrl); 

Answer 2

此function可能会有所帮助

 function updateUrlParameter(param, value) { const regExp = new RegExp(param + "(.+?)(&|$)", "g"); const newUrl = window.location.href.replace(regExp, param + "=" + value + "$2"); window.history.pushState("", "", newUrl); } 

编辑 ：以下解决方案更简单，如果参数还不是URL的一部分，它也可以工作。 但是，Internet Explorer不支持它（你不说？）。

 function setQueryStringParameter(name, value) { const params = new URLSearchParams(location.search); params.set(name, value); window.history.replaceState({}, "", decodeURIComponent(`${location.pathname}?${params}`)); } 

Answer 3

这是我用来做这个的function。 （大部分功劳都归于此 ）。

用法：

 setQueryStringParameter("param1","foo"); //pushes a new history state of ?param1=foo setQueryStringParameter({param1:"foo",param2:"bar"}); //pushes multiple changes setQueryStringParameter({param3:"another foo"},{type:"replace"}); //replace history instead of push 

码：

 function setQueryStringParameter(key, value, options) { var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''), q = document.location.search, changes = {}, aType = typeof(key), clear = false; if(aType == "string"){ changes[key] = value; }else if(aType == "object"){ changes = key; options = value; }else if(key === false){ clear = true; } //Options if(!options) options = {}; var historyType = options.type ? options.type : "push", state = options.state ? options.state : {}, title = options.title ? options.title : ""; if(clear){ q = ""; }else{ var escapeRegExp = function(string){ return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}; for (var key in changes) { var value = changes[key]; var newParam = key + '=' + encodeURIComponent(value); var updateRegex = new RegExp('([\?&])' + escapeRegExp(key) + '[^&]*'); var removeRegex = new RegExp('([\?&])' + escapeRegExp(key) + '=[^&;]+[&;]?'); if( typeof value == 'undefined' || value == null || value == '' ) { // Remove param if value is empty q = q.replace(removeRegex, "$1"); q = q.replace( /[&;]$/, "" ); } else if (q.match(updateRegex) !== null) { // If param exists already, update it q = q.replace(updateRegex, "$1" + newParam); } else { // Otherwise, add it to end of query string var join = q ? "&" : "?"; q = q + join + newParam; } } } if(q == "?") q = ""; window.history[historyType+"State"](state, title, baseUrl + q); return !!q; //Return true if there's a query string, false otherwise }