Aggiunta del parametro all'URL senza aggiornamento

Question

So che questo è stato chiesto molte volte prima, ma le risposte non erano abbastanza descrittive per risolvere il mio problema. Non voglio cambiare l'intero URL della pagina. Voglio aggiungere un parametro &item=brand al clic del pulsante senza aggiornamento.

L'utilizzo di document.location.search += '&item=brand'; consente di aggiornare la pagina.

Utilizzo di window.location.hash = "&item=brand"; append senza aggiornamento ma con un hash # che elimina l'utilizzo/l'effetto del parametro. Ho provato a rimuovere l'hash dopo l'aggiunta ma non ha funzionato.

---

This answer e molti altri suggeriscono l'uso di HTML5 Storia API, in particolare il metodo di history.pushState, e per i vecchi browser è quello di impostare un identificatore di frammento per evitare che la pagina da ricaricare. Ma come?

---

Supponendo che l'URL è: http://example.com/search.php?lang=en

Come posso aggiungere &item=brand usando il metodo HTML5 pushState o un identificatore di frammento così l'output sarà simile a questo: http://example.com/search.php?lang=en&item=brand senza un aggiornamento della pagina?

---

Spero che qualcuno possa far luce su come utilizzare il HTML5 pushState per aggiungere un parametro a un URL esistente/corrente. O in alternativa come impostare un identificatore di frammento per lo stesso scopo. Un buon tutorial, demo o codice con una piccola spiegazione sarebbe fantastico.

Demo di quello che ho fatto finora. Le tue risposte sarebbero molto apprezzate.

Answer 1

Offriamo le pushState o replaceState metodi, cioè .:

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

O

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