Add parameter to url javascript without reload

I know this has been asked many times before but answers were not descriptive enough to solve my problem. I don't want to change the whole URL of page. I want to append a parameter &item=brand on button click without refresh.

Using document.location.search += '&item=brand'; makes the page refresh.

Using window.location.hash = "&item=brand"; append without refresh but with a hash # which eliminates the usage/effect of the parameter. I tried to remove the hash after appending but that didn't work.

This answer and many others suggest the use of HTML5 History API, specifically the history.pushState method, and for old browsers is to set a fragment identifier to prevent page from reloading. But how?

Assuming the URL is: //example.com/search.php?lang=en

How can I append &item=brand using HTML5 pushState method or a fragment identifier so the output would be like this: //example.com/search.php?lang=en&item=brand without a page refresh?

I hope someone can throw some light on how to use the HTML5 pushState to append a parameter to an existing/current URL. Or alternatively how to set a fragment identifier for the same purpose. A good tutorial, demo or piece of code with a little explanation would be great.

Demo of what I've done so far. Your answers would be greatly appreciated.

window.history.pushState["object or string", "Title", "new url"];

window.history.replaceState[null, null, "?arg=123"];

	

		var currentURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?arg=1';    

		window.history.pushState[{ path: currentURL }, '', currentURL];
	

	

	
		var url = new URL["//www.eyehunts.com"];

		var newURL = url + '?arg=1';    

		console.log[newURL.toString[]];
	

					

Start of main content

Using the History API

The HTML5 History API is definitely the way to go for modern websites. It accomplishes the task at hand, while also providing additional functionality. You can use either history.pushState[] or history.replaceState[] to modify the URL in the browser, depending on your needs:

const nextURL = '//my-website.com/page_b';
const nextTitle = 'My new page title';
const nextState = { additionalInformation: 'Updated the URL with JS' };


window.history.pushState[nextState, nextTitle, nextURL];


window.history.replaceState[nextState, nextTitle, nextURL];

The arguments for both methods are the same, allowing you to pass a customized serializable state object as the first argument, a customized title [although most browsers will ignore this parameter] and the URL you want to add/replace in the browser's history. Bear in mind that the History API only allows same-origin URLs, so you cannot navigate to an entirely different website.

Using the Location API

The older Location API is not the best tool for the job. It reloads the page, but still allows you to modify the current URL and might be useful when working with legacy browsers. You can modify the URL, using either Window.location.href, location.assign[] or location.replace[]:

const nextURL = '//my-website.com/page_b';


window.location.href = nextURL;


window.location.assign[nextURL];


window.location.replace[nextURL];

As you can see, all three options will cause a page reload, which can be undesirable. Unlike the History API, you can only set the URL, without any additional arguments. Finally, the Location API doesn't restrict you to same-origin URLs, which can cause security issues if you are not careful.

Recommended snippets

• Gets the protocol being used on the current page.

• Creates an object containing the parameters of the current URL.

• Redirects the page to HTTPS if it's currently in HTTP.

How do I modify the URL without reloading the page?

How do you add value to a URL?

How can I remove URL parameters without refreshing page?

Can you use Javascript to get URL parameter values?