How to add or remove query string in URL without page refresh

You can add/remove query string from URL without reloading page in javascript. Generally URL changes by page reloading. When URL changes page gets refresh and new content appears on page.

e.g. Go

Here when we click 'Go' it goes to new URL with query string.

HTML5 gave you facility to change URL using pushState function to change URL and append data using ajax.

e.g. history.pushState({state:1, rand: Math.random()}, '', "?page="+1);

history.pushState function is used to add history state. It takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.

You can test code by clicking following buttons

Use following code function to modify query string without page reload

//Add jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
//Define variable
var objQueryString={};

//Get querystring value
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

//Add or modify querystring
function changeUrl(key,value) {
	//Get query string value
	var searchUrl=location.search;
	if(searchUrl.indexOf("?")== "-1") {
		var urlValue='?'+key+'='+value;
		history.pushState({state:1, rand: Math.random()}, '', urlValue);
	}
	else {
		//Check for key in query string, if not present
		if(searchUrl.indexOf(key)== "-1") {
			var urlValue=searchUrl+'&'+key+'='+value;
		}
		else {	//If key present in query string
			oldValue = getParameterByName(key);
			if(searchUrl.indexOf("?"+key+"=")!= "-1") {
				urlValue = searchUrl.replace('?'+key+'='+oldValue,'?'+key+'='+value);
			}
			else {
				urlValue = searchUrl.replace('&'+key+'='+oldValue,'&'+key+'='+value);	
			}
		}
		history.pushState({state:1, rand: Math.random()}, '', urlValue);
		//history.pushState function is used to add history state.
		//It takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.
	}
	objQueryString.key=value;
	sendAjaxReq(objQueryString);
}

//Used to display data in webpage from ajax
function sendAjaxReq(objQueryString) {
	$.post('test.php', objQueryString, function(data) {
		//alert(data);
	})
}


//Function used to remove querystring
function removeQString(key) {
	var urlValue=document.location.href;
	
	//Get query string value
	var searchUrl=location.search;
	
	if(key!="") {
		oldValue = getParameterByName(key);
		removeVal=key+"="+oldValue;
		if(searchUrl.indexOf('?'+removeVal+'&')!= "-1") {
			urlValue=urlValue.replace('?'+removeVal+'&','?');
		}
		else if(searchUrl.indexOf('&'+removeVal+'&')!= "-1") {
			urlValue=urlValue.replace('&'+removeVal+'&','&');
		}
		else if(searchUrl.indexOf('?'+removeVal)!= "-1") {
			urlValue=urlValue.replace('?'+removeVal,'');
		}
		else if(searchUrl.indexOf('&'+removeVal)!= "-1") {
			urlValue=urlValue.replace('&'+removeVal,'');
		}
	}
	else {
		var searchUrl=location.search;
		urlValue=urlValue.replace(searchUrl,'');
	}
	history.pushState({state:1, rand: Math.random()}, '', urlValue);
}

</script>

<div>
	<input type="button" value="Add id" onClick="changeUrl('id','2')" />
	<input type="button" value="Add category" onClick="changeUrl('category','mobile')" />
	<input type="button" value="Add item" onClick="changeUrl('item','samsung')" />

	<input type="button" value="Remove id" onClick="removeQString('id','2')" />
	<input type="button" value="Remove category" onClick="removeQString('category')" />
	<input type="button" value="Remove item" onClick="removeQString('item')" />
	<input type="button" value="Remove query string" onClick="removeQString('')" />
</div>