HTML5 Local Storage based preferences for the URL Generator project

Sriram S
Programming, Technology
Page content

The release 2 (R2) of my URL Generator Project is now ready. You can check it out at the usual location. I am happy to share that this revision was completed on time as per my revised project plan. Of course the announcement was delayed a bit. The main additions to this version of the URL generator are HTML5 based Local Storage, a simple usage of Object-oriented JavaScript techniques and jQuery.

Storing preferences using HTML5 Local Storage

The UTM URL generator page has several settings such as check boxes for UTM medium, fields for UTM category and source. The main goal was to persist user selections as his preferences and load the saved preferences when the user revisits. The common technique is to use cookies but with the I felt that HTML5 local storage provided a much simpler API for this purpose.

What happens?

When user visits the tool web page, the HTML5 Local Storage database is queries for the preference information. If nothing is found, default values are returned. The page is then initialized with values based on the preference. Subsequent changes due to user interaction results in updating of the preference in the Local Storage.

You can read more about HTML5 Local Storage here, especially the techniques to manage non-string values.

Object Oriented JavaScript

The preferences based on local storage required several get and set functions as well as validations. In order to have a clean separation I created a JavaScript class called PreferenceManager. This is my first class in JavaScript and for a Java language enthusiast this is an important milestone. There are many ways to define classes in JavaScript. But I opted for the prototype based approach since the code seemed more organized and cohesive with this approach.

The source code for the PreferenceManager class can be found here.

Using jQuery for code cleanup

Lastly I used jQuery to perform get and set on the actual form components. For example, check whether a checkbox is _checked _ or not. Until this version, I had utility functions that effectively called getElementById() methods which had bloated the code. With jQuery, I was able to reduce the number of functions as well as number of lines of code.

The usage of jQuery can be found here.