URL 对象添加或删除参数

Question

我正在尝试将每个复选框的值添加到 URLsearchParams，第一次检查复选框时效果很好，但是当我重新加载页面时，它不再起作用，我做错了什么？我的意思是当它是 state 时它可以工作，但在页面加载后，它不工作，我该如何解决这个问题？

function setURL(query){
//var url = window.location.protocol + "//" + window.location.host + window.location.pathname;
var url = window.location.href;
let newURL = new URL(url);
newURL.searchParams.append('brands', query)
window.history.replaceState(null, null, newURL);
}

function checkURL(){
var url = window.location.href;
let newURL = new URL(url);
window.history.replaceState(null, null, newURL);
     if(newURL.searchParams.has('brands')){
let currentBrands = newURL.searchParams.get('brands');
let brandsArray = currentBrands.split(',');
brandsArray.map(function(v,i){
jQuery('input[name="pa_brand"][value="'+v+'"]').click();
});
     }
}
checkURL();
let array = [];

jQuery('input[name="pa_brand"]').change(function(){
        let value = this.value;
        let id = array.indexOf(value);

        if(jQuery(this).is(':checked')){
        array.push(value)
        } else {
        array.splice(id,  1);
        }
setURL(array.toString())
console.log(array)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="pa_brand" value="116"/>
<input type="checkbox" name="pa_brand" value="117"/>
<input type="checkbox" name="pa_brand" value="118"/>

Answer 1

首先将newURL.searchParams.append('brands', query) 替换为newURL.searchParams.set('brands', query)。它也可以在 checkURL 将初始值放入 array 变量中解决您的问题。我在这两个更改之后编辑了您的代码，一切似乎都很好。

let array = [];
function setURL(query){
//var url = window.location.protocol + "//" + window.location.host + window.location.pathname;
var url = window.location.href;
let newURL = new URL(url);
newURL.searchParams.set('brands', query)
window.history.replaceState(null, null, newURL);
}

function checkURL(){
var url = window.location.href;
let newURL = new URL(url);
window.history.replaceState(null, null, newURL);
     if(newURL.searchParams.has('brands')){
let currentBrands = newURL.searchParams.get('brands');
let brandsArray = currentBrands.split(',');
array = brandsArray;
brandsArray.map(function(v,i){
jQuery('input[name="pa_brand"][value="'+v+'"]').click();
});
     }
}
checkURL();


jQuery('input[name="pa_brand"]').change(function(){
        let value = this.value;
        let id = array.indexOf(value);

        if(jQuery(this).is(':checked')){
        array.push(value)
        } else {
        array.splice(id,  1);
        }
setURL(array.toString())
console.log(array)
 })