Parameter an URL ohne Aktualisierung anfügen

Question

Ich weiß, dass das schon oft gefragt wurde, aber die Antworten waren nicht beschreibend genug, um mein Problem zu lösen. Ich möchte nicht die gesamte URL der Seite ändern. Ich möchte einen Parameter &item=brand auf Knopfdruck ohne Aktualisierung anhängen.

Mit document.location.search += '&item=brand'; wird die Seite aktualisiert.

Verwendung von window.location.hash = "&item=brand"; Append ohne Aktualisierung, aber mit einem Hash #, die die Verwendung/Wirkung des Parameters eliminiert. Ich habe versucht, den Hash nach dem Anhängen zu entfernen, aber das hat nicht funktioniert.

---

This answer und viele andere schlagen die Verwendung von HTML5 History API, insbesondere die history.pushState Methode und für alte Browser ist ein Fragment-ID einstellen Seite zu verhindern, erneut zu laden. Aber wie?

---

Unter der Annahme, die URL lautet: http://example.com/search.php?lang=en

Wie kann ich anhängen &item=brand HTML5 pushstate-Methode oder ein Fragment Kennung, so die Ausgabe so wäre: http://example.com/search.php?lang=en&item=brand ohne Aktualisierung der Seite?

---

Ich hoffe, dass jemand etwas Licht auf, wie werfen kann die HTML5 pushstate verwenden, um einen Parameter zu einer vorhandenen/aktuelle URL anhängen. Oder alternativ, wie man eine Fragmentkennung für den gleichen Zweck setzt. Ein gutes Tutorial, eine Demo oder ein Stück Code mit einer kleinen Erklärung wäre großartig.

Demo von dem, was ich bisher getan habe. Ihre Antworten würden sehr geschätzt werden.

Answer 1

können Sie die pushState oder replaceState Methoden verwenden, d.h .:

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

ODER

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