Javascript 将参数附加到URL而不刷新

我知道这个问题以前被问过很多次，但答案不足以解决我的问题。我不想更改页面的整个URL。我想在单击按钮时附加一个参数

&item=brand

，无需刷新

使用

document.location.search+='&item=brand'使页面刷新

使用
window.location.hash=“&item=brand”附加而不刷新，但带有散列
#
，消除了参数的使用/效果。我尝试在添加后删除散列，但没有成功


许多其他人建议使用HTML5历史API，特别是
History.pushState
方法，对于旧浏览器，是设置片段标识符以防止页面重新加载。但是怎么做呢


假设URL为：
http://example.com/search.php?lang=en

如何使用HTML5 pushState方法或片段标识符追加
&item=brand
，以便输出如下：
http://example.com/search.php?lang=en&item=brand
不刷新页面


我希望有人能解释一下如何使用HTML5 pushState将参数附加到现有/当前URL。或者，如何为相同的目的设置片段标识符。一个好的教程、演示或一段代码加上一点解释就好了

我到目前为止所做的一切。非常感谢您的回答。
您可以使用或方法，即：

window.history.pushState("object or string", "Title", "new url");

或

带参数的示例：

var refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?arg=1';    
window.history.pushState({ path: refresh }, '', refresh);

如果有人想向更复杂的url（我的意思是，）添加参数，下面的代码对我很有用：

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?newParameter=1';
window.history.pushState({ path: newurl }, '', newurl);

希望这有帮助
 
导出函数getHash（hash:string，key:string）：string |未定义{
返回散列
.split（“#”）
.find（（h）=>h.startsWith（键））
？替换（`${key}=`，”）；
}
导出函数setHash（hash:string，key:string，value:string）：string{
让hashArray=hash.split（#”）.filter（（h）=>！h.startsWith（key））；
push（`${key}=${value}`）；
返回hashArray.length>0
？hashArray.reduce（（s1，s2）=>`${s1}#${s2}`）
: "";
}
导出函数deleteHash（散列：字符串，键：字符串）：字符串{
让hashArray=hash.split（#”）.filter（（h）=>！h.startsWith（key））；
返回hashArray.length>0
？hashArray.reduce（（s1，s2）=>`${s1}#${s2}`）
: "";
}
如果要同时添加和删除参数，也可以使用URL API：

constURL=新url（window.location.href）；
url.searchParams.set（'param1'，'val1'）；
url.searchParams.delete（'param2'）；
window.history.replaceState（null，null，url）；//或国家
修改了答案，这就成功了

const insertParam = (key: string, value: string) => {
    key = encodeURIComponent(key);
    value = encodeURIComponent(value);

    let kvp = window.location.search.substr(1).split('&');
    if (kvp[0] === '') {
        const path = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + key + '=' + value;
        window.history.pushState({ path: path }, '', path);

    } else {
        let i = kvp.length; let x; while (i--) {
            x = kvp[i].split('=');

            if (x[0] === key) {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
            }
        }

        if (i < 0) { 
            kvp[kvp.length] = [key, value].join('=');
        }

        const refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + kvp.join('&');  
        window.history.pushState({ path: refresh }, '', refresh);
    }
}

const insertParam=（键：字符串，值：字符串）=>{
键=组件（键）；
值=组件（值）；
让kvp=window.location.search.substr（1）.split（'&'）；
如果（kvp[0]=''）{
const path=window.location.protocol+“/”+window.location.host+window.location.pathname+'？'+key+'='+value；
pushState（{path:path}'，，path）；
}否则{
设i=kvp.length；设x；while（i--）{
x=kvp[i]。拆分（'='）；
如果（x[0]==键）{
x[1]=数值；
kvp[i]=x.join（'='）；
打破
}
}
如果（i<0）{
kvp[kvp.length]=[key，value].join（'='）；
}
常量刷新=window.location.protocol+“/”+window.location.host+window.location.pathname+“？”+kvp.join（“&”）；
window.history.pushState（{path:refresh}'，，refresh）；
}
}
非常感谢您！这是可行的，但令人惊讶的是，该参数没有应用到系统中。但是，当我将其手动添加到URL中时，它将生效。我认为这是一个公认的答案，因为它解决了我的主要问题，但如果您对使用
history.pushState
添加参数时为什么不应用于系统有什么建议，请告诉我：）再次感谢。谢谢，我最后使用了window.history.replaceState（null，null，“？mock”）；在不重新加载的情况下添加url参数。浏览器兼容性为，但请注意，它不适用于IE10以下的浏览器或（可能）某些移动浏览器。以下是此工作代码的参考。我还将window.location.hash添加到新URL的末尾。
const insertParam = (key: string, value: string) => {
    key = encodeURIComponent(key);
    value = encodeURIComponent(value);

    let kvp = window.location.search.substr(1).split('&');
    if (kvp[0] === '') {
        const path = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + key + '=' + value;
        window.history.pushState({ path: path }, '', path);

    } else {
        let i = kvp.length; let x; while (i--) {
            x = kvp[i].split('=');

            if (x[0] === key) {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
            }
        }

        if (i < 0) { 
            kvp[kvp.length] = [key, value].join('=');
        }

        const refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + kvp.join('&');  
        window.history.pushState({ path: refresh }, '', refresh);
    }
}