How to store program state in URL query string?

Question

How do I read, and write, to the query string?

var pageNumber = QueryString['pageNumber'];
var pageSize   = QueryString['pageSize'];

$('#next').click(function() { 
    QueryString['pageNumber'] = ++pageNumber;
    refresh(); 
});

function refresh() { /** get data and update page here **/ }

This, of course, will allow users to copy and paste URLs that contain partial program state.

Is there an API similar to QueryString (used above)?

Never seen that `QueryString` object before, where are you getting it from? — Barmar, Jun 01 '13 at 04:40
@Barmar - "Is there an API similar to QueryString (used above)?"; I think the point is the OP hasn't seen that object either and wants one. — Richard JP Le Guen, Jun 01 '13 at 04:41
possible duplicate of [How to use jquery query string object plugin - set, empty, remove methods not working](http://stackoverflow.com/questions/2906141/how-to-use-jquery-query-string-object-plugin-set-empty-remove-methods-not-wo) — Barmar, Jun 01 '13 at 04:44

Eric Drechsel · Answer 1 · 2013-06-06T23:38:21.567

As Richard mentioned, changing the query string by assigning to window.location.search will trigger a page reload.

For this reason, it is common practice to instead encode client-side state in the fragment identifier ("hash routing", which is compatible with older browsers) or to manipulate the path using history.pushState (part of HTML5). pushState requires serverside support, which usually takes the form of a wildcard route.

Libraries such as Director or Backbone Router provide abstractions that will work with either technique.

Update I didn't know this until doing research for this answer, but it is possible to manipulate the query string via pushState (which makes sense given that it's part of the URL). As the author of this demo points out, this allows using pushState without any special serverside support.

score 0 · Answer 2 · edited May 23 '17 at 12:05

In-browser JavaScript can access the query string using the Browse Object Model's window.location.search property. There isn't a lot of native support for parsing that query string though. (see also How can I get a specific parameter from location.search?)

Perhaps something like this will do?

var GET = {}; // I've taken the liberty of re-naming your `QueryString` object
              // to just `GET`, kind of in the style of PHP.
              // Mostly because I find it confusing to refer to something which
              // is not a string (it is an object/map) as a string.
var queryString = window.location.search.replace(/^\?/, ''); // but this: *this* is a string!
queryString.split(/\&/).forEach(function(keyValuePair) {
    var paramName = keyValuePair.replace(/=.*$/, ""); // some decoding is probably necessary
    var paramValue = keyValuePair.replace(/^[^=]*\=/, ""); // some decoding is probably necessary
    GET[paramName] = paramValue;
});

var pageNumber = GET['pageNumber']?Number(GET['pageNumber']):0;

$('#next').click(function() { 
    GET['pageNumber'] = ++pageNumber;
    refresh(); 
});

function refresh() {
    var newQueryString = Object.keys(GET).reduce(function(keyValuePairs, paramName) {
        keyValuePairs.push(escape(paramName)+"="+escape(GET[paramName]));
        return keyValuePairs;
    }, []).join('&');

    window.location.search = "?"+newQueryString;
}

Does calling window.location.search not trigger a page load? — Landon Kuhn, Jun 01 '13 at 05:10
@landon9720 - That depends on what you mean by "calling". Reading the value will not trigger a page load; writing to it will. If you don't want that the `window.location.hash` value (which corresponds to the [Fragment Identifier](http://en.wikipedia.org/wiki/Fragment_identifier)) can be changed without triggering a page load. — Richard JP Le Guen, Jun 01 '13 at 05:55

How to store program state in URL query string?

2 Answers2

Linked