Question

如何使用History.pushState()设置网址参数以避免浏览器刷新？如果没有一个简单的JS解决方案，是否已经有一个流行的库或jQuery的内置函数？

这是一个相关的SO问题，其中接受的答案实际上并不符合评论＆amp;我的测试（删除查询字符串而不是更新值）：history.pushState() change query values

为了清楚起见，我指的是查询字符串中的URL参数： http://google.com/page?name=don我们可以将don更改为tim而不会导致重新加载。

我发现这是one possible solution。但是我很担心使用只有2个粉丝的JS库：P

Answer 1

您可以使用下面的小型图书馆中的queryString.push('my_param_key', 'some_new_value')。

它将使用history.push更新您的URL参数，因此浏览器不会刷新。

它只会影响您希望改变的参数，它会使路径和其他参数不受影响。

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

Answer 2

回答评论中的问题，您可以从history.state读取这些属性，该属性包含当前网址的统计值。无论何时你前进和后退，你都会收到一个popstate事件，你将能够阅读你所推动的状态，这比处理网址容易得多。

当然，当您返回或转发到使用pushState()或replaceState()推送的历史记录列表中的新条目时，该页面不会重新加载。

您可以在MDN中了解有关历史记录对象的更多信息。

Answer 3

这是一个我写的一个简单的函数，它不像上面的答案一样整洁，但是它可以解决这个问题......

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

设置URL参数而不会导致页面刷新

3 个答案: