Simple jQuery Plugin for Handling Query Strings

This plugin creates an array with key value pairs where the key is the query string key and the value is the value for that key. It only has two methods, deserialize to deserialize the query string into an array and serialize to create the query string from an array.

Here’s an example of how to use it. If we visit the example page below with the query string “?param1=foo&param2=bar”. The first alert box will show us “foo” and the second will show us the new query string which will be “?param1=foo&param2=Hello World!”.

The last line is just to show you that you can deserialize your own strings, it doesn’t have to be the query string in your URL.

<script>
    // Deserialize the querystring into an array
    var items = $.qsHandler.deserialize();
    
    // Show the value of param1 in an alert box
    alert(items['param1']);
    
    // Change the value of param2 to Hello World!
    items['param2'] = 'Hello World!';
    
    // Serialize the changed query string
    var queryString = $.qsHandler.serialize(items);
    
    // Show the new query string in an alert box
    alert(queryString);
    
    // You can also deserialize a query string in a regular string
    var items2 = $.qsHandler.deserialize(queryString);
</script>

Well wasn’t that easy? And the plugin is really lightweight as well, about a half KB when minimized.