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

Question

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

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

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

---

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

---

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

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

---

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

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

Answer 1

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

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

ИЛИ

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