Как менять и добавлять значение в строке jQuery?

Question

[kamisarlapsha]

Привет! По нескольким кнопка в строку добавляю значение с ключом (key=value). Вопрос в том, как добавлять в строку новое значение с ключом, не теряя старое(после каждого нажатия перезагрузка) и если ключ уже есть в строке, то просто обновить его значение ?

К примеру:
site.com/catalog&key1=value1&key2=value2
После нажатия кнопки с key5 и value9

site.com/catalog&key1=value1&key2=value2&key5=value9

После нажатия кнопки с key1 и value3

site.com/catalog&key1=value3&key2=value2&key5=value9

По нажатию кнопки key и value уже есть. Не терять старое уже вроде бы сделал. Средствами php получаю то, что было до перезагрузки. (Например было &key1=value1&key2=value2 значит hash = &key1=value1&key2=value2).

$('button').click(function(){
    var key =  $(this).parent().attr('data-key');
    var filter_id = $(this).attr('data-id');

    //Попробовал сделать проверку ключа. hash - уже то, что было до нажатия кнопки (&key1=value1&key2=value2). 
   // можно дальше придумать ?
    keys = hash.split('&');
    $.each(keys, function(index, value) {
        keys[index] = value.split('=')[0];
     });
     if(jQuery.inArray(key, keys) !== -1) {
         //если key есть в массиве значит в строке нужно обновить его значение
     }

    //Далее переадресуем по новой ссылке
    //location = '<?php echo $action; ?>&' + key + '=' + filter_id; изначально делал так. 
});

Подскажите, как лучше сделать ? Заранее спасибо!

Answer 1

[akyl-kb]

https://codepen.io/akylkg/pen/PooOwGN
HTML

<input type="text" name="query"  value="sort=new&page=1">
<input type="text" name="url"  value="">
<button data-key="key1" data-value="value1">Add item 1</button>
<button data-key="key2" data-value="value2">Add item 2</button>

JQuery

var $inputQuery = $('input[name=query]')
var $inputUrl = $('input[name=url]')

$('button').click(function(event) {
  event.preventDefault()
  
  var $this = $(this)
  var key = $this.attr('data-key')
  var value = $this.attr('data-value')
  var query = $inputQuery.val()
  var params = new URLSearchParams(query)
  params.set(key, value)

  var updatedQuery = params.toString()
  $inputQuery.val(updatedQuery)
  $inputUrl.val('http://test.ru/news?' + updatedQuery)
})

Пример вывода

input query: sort=new&page=1&key2=value2&key3=value3
input url: http://test.ru/news?sort=new&page=1&key2=value2&key3=value3