HTML5 client-side storage tutorial: Beyond cookies

When you load the page created in Listing 1 in your browser, the init function will be launched. The init function will first check to see whether the sessionStorage object is available in the window by checking for window.sessionStorage. If the sessionStorage object is not available, then you will display a message in your div on the page.

Assuming that the session Storage object is available, the JavaScript code then checks to see whether the key visits exists by asking for the value through the dot notation: sessionStorage.visits. If the key visits exists, then the value will be returned, and the check will pass. Otherwise, you know that this is the first time for this session and will start the visits count at 1.

If the key is in session storage, then to demonstrate the get method of retrieving values, you will retrieve the value of the key via the getItem method. When the value is retrieved, you convert the visits string value to an integer data type with parseInt. This conversion must be done because all values in web storage are stored as basic strings. If your script is storing and then retrieving other data types, you will want to convert these strings to their proper types.

After you have either retrieved the number of visits and incremented it by 1 or set the initial value to 1, the script will then update the visits key in the session storage with the setItem method. If the key was not in session storage previously, then setItem will add the key/value pair, but if the visits key was already in session storage, then the value will be updated with the new number of visits.

Chrome developer tools for viewing storage

You may wonder after loading the page created in Listing 1 in your browser how you can validate what is happening behind the scenes in the local session storage as the script runs. The Google Chrome browser has a set of tools titled Developer Tools that you may already be familiar with. If you open these tools in your browser window and refresh your page, you will be able to see the session storage key/value pairs under the Resources section, as shown in Figure 1.

In Figure 1, the domain that has stored keys is shown on the left under Session Storage, and on the right are the key/value pairs that are currently stored. In this case, the current value of visits is 2, and the JavaScript has displayed this to the user. The Developer Tools of Chrome are useful for working with the session and local storage because you can confirm not only that your script is working correctly but also add, update, and remove key/value pairs through the user interface. In the current version of the Developer Tools, you will need to refresh the storage key/value view pane with the Refresh button at the bottom if you change a key/value pair.

Tip: Any object that has a toString built-in method can be stored in the value field of the key/value pairs of session and local storage. Even more complex JSON structured objects can be stored by using the JSON.stringify(yourObject) and JSON.parse(itemRetrieved) methods to convert the JSON object to a string and then convert the string retrieved back to your object.

This recipe performed a very simple setting and getting of a key/value pair in session storage. The next recipe will include error handling and show the availability of session storage across pages.

Beginner recipe: Styling from session storage

In this recipe, you will provide the visitor to your page with the opportunity to select a theme color for the background of the pages. The visitor's selection will be stored in the session storage and retrieved on a second page to control the background color. A theme reset option is provided, which will remove the stored background key/value pair from the session storage. The following is the removeItem method that will be used in this recipe:

removeItem(key)

Here key is the key string to be removed.

Like any data storage mechanism, session and local storage have size limitations in place to protect the browser and the client's machine. Each browser sets its own size limitation, but unlike cookies, which are limited to a rather small 4KB, the sizes allocated for session and local storage are much larger. At the time of writing this book, Internet Explorer 9, for example, has a 10MB limitation.

If your script attempts to set or update a value for a key and hits this ceiling, an error will be thrown. To prevent your script from abruptly ending because of this error, you should wrap your setItem method calls in a try-catch block. In this recipe, we will show you how to catch this error if it were to happen. The following steps and Listing 2 will allow you to create page 1 of the recipe:

1. Create the page in Listing 2 with the style, script, and body tags.
2. Add the themeContent and themeSettings divs, as shown in Listing 2 with the corresponding HTML.
3. Add the initTheme, setTheme, resetTheme, and applyTheme functions to your script.
4. Add the window.addEventListener statement to trigger the initTheme function.