Set URL parameters without causing page refresh

Question

How can you set URL parameters using History.pushState() to avoid browser refreshes? If there is a not a simple JS solution, is there already a popular library or built in function for jQuery?

Here is a relevant SO question, where the accepted answer does not actually work according to comments & my test (it removes the query string instead of updating a value): history.pushState() change query values

Just to be clear, I am referring to the URL parameters in a query string: http://google.com/page?name=don so we could change don to tim without causing a reload.

Here is one possible solution I found. However I'm nervous about using a JS library that only has 2 followers :P

• Andy E: The idea behind the state object (the first parameter for pushState()) is to set data that is accessible without having to bother with query string parameters. Is there a reason you don't want to use that?
• Don P: @AndyE - I'm not sure I follow. If I do history.pushState({name: "don"}, "some page title", "/page") to set the state, and then use window.location.search to see the URL params, it is empty. Are you saying I am able access the value for name?
• problemPotato: Changing the url forces refreshes in most browsers. If you can put your variable after a # then you'll stop the refresh, as the browser will interpret that as a different location on the same page.
• Don P: @problemPotato - I'm aware of hash fragments, that's not the question I'm asking about. Changing the URL does not force a refresh in "most browsers" either, please see docs for the js history API we are discussing here.

Answer 1

You can just use queryString.push('my_param_key', 'some_new_value') from the small library below.

It will update your URL param using history.push, so the browser will not refresh.

It will only affect the param you wish to change, it will leave the path and other params unaffected.

/*!
 query-string
 Parse and stringify URL query strings
 https://github.com/sindresorhus/query-string
 by Sindre Sorhus
 MIT License
*/
(function () {
 'use strict';
 var queryString = {};
 queryString.parse = function (str) {
 if (typeof str !== 'string') {
 return {};
 }
 str = str.trim().replace(/^\?/, '');
 if (!str) {
 return {};
 }
 return str.trim().split('&').reduce(function (ret, param) {
 var parts = param.replace(/\+/g, ' ').split('=');
 var key = parts[0];
 var val = parts[1];
 key = decodeURIComponent(key);
 // missing `=` should be `null`:
 // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
 val = val === undefined ? null : decodeURIComponent(val);
 if (!ret.hasOwnProperty(key)) {
 ret[key] = val;
 } else if (Array.isArray(ret[key])) {
 ret[key].push(val);
 } else {
 ret[key] = [ret[key], val];
 }
 return ret;
 }, {});
 };
 queryString.stringify = function (obj) {
 return obj ? Object.keys(obj).map(function (key) {
 var val = obj[key];
 if (Array.isArray(val)) {
 return val.map(function (val2) {
 return encodeURIComponent(key) + '=' + encodeURIComponent(val2);
 }).join('&');
 }
 return encodeURIComponent(key) + '=' + encodeURIComponent(val);
 }).join('&') : '';
 };
 queryString.push = function (key, new_value) {
 var params = queryString.parse(location.search);
 params[key] = new_value;
 var new_params_string = queryString.stringify(params)
 history.pushState({}, "", window.location.pathname + '?' + new_params_string);
 }
 if (typeof module !== 'undefined' && module.exports) {
 module.exports = queryString;
 } else {
 window.queryString = queryString;
 }
})();

• Frozenfire: Just a note for anyone who went to github first, queryString.push was added to the library in this answer

Answer 2

Answering to the question in your comment, you'd be able to read those properties from history.state, a property that holds the value of the stat for the current URL. Whenever you go back and forward you'll receive a popstate event and you will be able tor read the state you pushed, which is far easier than dealing with urls.

Of course, when you go back or forward to a new entry in the history list pushed with pushState() or replaceState() the page does not reload.

You can read more about the History object in the MDN.

• Don P: Thanks @Oscar, but when you use history.state - it prevents you from sharing URL's - something I would like to support for this case.
• Oscar Paz: You're right, it is not a good solution if you want to share the urls. Try then the document.location.replace() method, adding a hash to the url (the part after a '#'). Then, on page load, you can get the parameters (or whatever you had put there, it's just a string), via document.location.hash.

Answer 3

Here is a simple function I wrote it isn't as neat as the above answer but it does the trick...

 function changeUrlParam (param, value) {
 var currentURL = window.location.href;
 var urlObject = currentURL.split('?');
 var newQueryString = '?';
 value = encodeURIComponent(value);
 if(urlObject.length > 1){
 var queries = urlObject[1].split('&');
 var updatedExistingParam = false;
 for (i = 0; i < queries.length; i++){
 var queryItem = queries[i].split('=');
 if(queryItem.length > 1){
 if(queryItem[0] == param){
 newQueryString += queryItem[0] + '=' + value + '&';
 updatedExistingParam = true;
 }else{
 newQueryString += queryItem[0] + '=' + queryItem[1] + '&';
 }
 }
 }
 if(!updatedExistingParam){
 newQueryString += param + '=' + value + '&';
 }
 }else{
 newQueryString += param + '=' + value + '&';
 }
 window.history.replaceState('', '', urlObject[0] + newQueryString.slice(0, -1));
 }