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 b

Answer 1

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));
            }

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.

Answer 3

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;
    }
})();