Ajout du paramètre à l'URL sans actualiser

Je sais que cela a été demandé plusieurs fois avant, mais les réponses n'étaient pas assez descriptives pour résoudre mon problème. Je ne veux pas modifier l'URL entière de la page. Je souhaite ajouter un paramètre &item=brand sur le bouton cliquez sans rafraîchir.

Utilisation de document.location.search += '&item=brand'; Rend l'actualisation de la page.

Utilisation de window.location.hash = "&item=brand"; Ajoute sans rafraîchir mais avec un hash # qui élimine l'utilisation / l'effet du paramètre. J'ai essayé de supprimer le hash après l'ajout, mais cela n'a pas fonctionné.

Cette réponse et bien d'autres suggèrent que l'utilisation de HTML5 History API, en particulier la méthode history.pushState , et pour les anciens navigateurs, consiste à définir un identificateur de fragments pour empêcher la recharge de la page. Mais comment?

• Création / recherche de bookmaker de validateur html5
• Puis-je utiliser l'identifiant d'un élément HTML en tant que variable en JavaScript?
• Getter / setter pour src attribute dans js?
• Moyens de cacher html5 / javascript code
• Chaud pour obtenir des valeurs de saisie de date et d'heure incomplètes

En supposant que l'URL est: http://example.com/search.php?lang=en

Comment puis-je ajouter &item=brand utilisant la méthode pushState HTML5 ou un identificateur de fragment, de sorte que la sortie serait comme ceci: http://example.com/search.php?lang=en&item=brand sans actualisation de page?

J'espère que quelqu'un peut éclairer la façon d'utiliser HTML5 pushState pour ajouter un paramètre à une URL existante / actuelle. Ou bien, comment définir un identificateur de fragment dans le même but. Un bon tutoriel, une démo ou un morceau de code avec une petite explication serait génial.

Démo de ce que j'ai fait jusqu'ici. Vos réponses seront grandement appréciées.

• Erreur using sessionStorage
• Expliquez cette demandeAnimationFrame idiom
• Comment puis-je extraire une partie d'une image dans un canevas et l'utiliser comme image de fond pour un div?
• Snap.svg détermine la distance de traînée le long d'un chemin
• Validation de date HTML5

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

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