Добавление параметра в URL без обновления

Я знаю, что это было задано много раз, но ответы не были достаточно подробными для решения моей проблемы. Я не хочу изменять весь URL страницы. Я хочу добавить параметр &item=brand при нажатии кнопки без обновления.

Использование document.location.search += '&item=brand'; делает обновление страницы.

Использование window.location.hash = "&item=brand"; добавить без обновления, но с хешем #, который исключает использование/эффект параметра. Я попытался удалить хэш после добавления, но это не сработало.

Этот ответ и многие другие предлагают использовать API истории HTML5, в частности метод history.pushState, а для старых браузеров - установить идентификатор фрагмента, чтобы предотвратить страницу от перезагрузки. Но как?

Предполагая, что URL-адрес: http://example.com/search.php?lang=en

Как я могу добавить &item=brand с помощью метода push5ate HTML5 или идентификатора фрагмента, чтобы результат был таким: http://example.com/search.php?lang=en&item=brand без обновления страницы?

Надеюсь, кто-то может рассказать о том, как использовать push5ate HTML5, чтобы добавить параметр к существующему/текущему URL. Или, альтернативно, как установить идентификатор фрагмента для той же цели. Хороший учебник, демонстрация или фрагмент кода с небольшим объяснением будет отличным.

Демо того, что я сделал до сих пор. Ваши ответы будут очень признательны.

Ответы

Ответ 1

Вы можете использовать pushState или replaceState, т.е.

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

ИЛИ

window.history.replaceState(null, null, "/another-new-url");