javascript - 在不引起页面刷新的情况下设置URL参数

Question

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

这是一个相关的 SO 问题，其中接受的答案根据评论和我的测试实际上不起作用(它删除查询字符串而不是更新值):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;
    }
})();