Cross-browser Query Parameter Getter and Setter

Here’s a cross-browser compatible way of getting query parameter from a URL or setting query parameters and reloading the page. An alternate way would be to fetch something based on the parameters and then push the parameters to history.

function getQueryParameters() {
    var queryString = location.search.slice(1),
        params = {};

    queryString.replace(/([^=]*)=([^&]*)&*/g, function (_, key, value) {
        params[key] = value;
    });

    return params;
}

function setQueryParameters(params) {
    var query = [],
        key,
        value;

    for (key in params) {
        if (!params.hasOwnProperty(key)) {
            continue;
        }
        value = params[key];
        query.push(key + "=" + value);
    }

    location.search = query.join("&");
}

The example below will show you how to use the functions. Let’s assume you want a <select&gt; dropdown to trigger an event, in our case a page reload.

document.getElementById('selector').addEventListener('change', function () {
    var params = getQueryParameters(),
        selectedParameter = this.value;

    params.my_parameter = selectedParameter;
    setQueryParameters(params);
});

And that’s it! You’ve done it!

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Added by Ciprian on Saturday, September 29, 2018 in Blog, JavaScript

Unlimited Automated Page Speed Monitoring & Tracking. Completely free.
Use SpeedFactor to track your website. It’s simple, reliable, and best of all, it’s free forever.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started

Related Articles


Privacy Policy