изменение URL по клику AJAX

Question

Я пытаюсь добавить параметр в текущий URL по клику на div, чтобы я не потерял другие параметры, а также получил несколько новых параметров

 <div class='tabes_09o12rt' onclick="window.location.search += '&sort=FOO';">
 <div class='tabes_09o12rt' onclick="window.location.search += '&sort=BAR';">

это работает нормально, но когда я нажимаю на первый div, он добавляет параметр FOO к URL, а когда я нажимаю на div 2, он добавляет BAR с параметром с тем же самым neme, то, что я хочу, это если параметр уже добавлен с этим именем, затем измените его на новое имя и, если не добавлено, добавьте, и при двойном щелчке удалите этот параметр. мы можем сделать это ???

Answer 1

Разбор URL, а затем использование URLSearchParams API для манипулирования им вместо слепого добавления.

const url = new URL(location);
console.log("Original", url.toString());
url.searchParams.set("sort", "foo")
console.log("Foo", url.toString());
url.searchParams.set("sort", "bar")
console.log("Bar", url.toString());
// location = url;

Answer 2

Конечно, мы можем это сделать. Просто сохраните оригинальную строку и получите ее в функции.

<script type="text/javascript">
    var origin = window.location.search;
    function sort(method) {
       window.location.search = origin + '&sort=' + method;
    }
</script>

<div onClick="sort(foo)">Sort using foo</div>
<div onClick="sort(bar)">Sort using bar</div>