Estoy tratando de agregar valor de cada casilla de verificación a URL searchParams, la primera vez que marco una casilla de verificación funciona bien, pero cuando vuelvo a cargar la página, ya no funciona, ¿qué hice mal? Quiero decir que funciona cuando está en state pero después de cargar la página, no funciona, ¿cómo puedo solucionarlo?
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"/>En primer lugar, reemplace newURL.searchParams.append('brands', query) con newURL.searchParams.set('brands', query) . Resolverá su problema también en el valor inicial de checkURL para la variable de array . Edité tu código después de estos dos cambios y todo parece estar bien.
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) })