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)?
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.
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; } 
window.location.hash value (which corresponds to the Fragment Identifier) can be changed without triggering a page load.
QueryStringobject before, where are you getting it from?