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