Using Client-Side Storage - J Query

You are writing a rich Internet application that processes non trivial amounts of user data in the web browser. Motivated by the desire to cache this data for performance reasons or to enable offline use of your application, you need to store data on the client.


A simple to-do list will be used to illustrate storing data on the client. As with many of the recipes in this section, a jQuery plugin will be used to handle browser in consistencies:

The HTML consists of form elements for manipulating the to-do list: a text field to input a task, and buttons for adding a task and deleting all tasks. The current tasks will be listed using an unordered list:

The jStore plugin provides two callbacks: jStore.ready() and engine.ready(). Much like jQuery’sready() function, these allow us to do some initial setup once jStore and the current storage engine have completed their internal initialization. This opportunity is used to display the currently used storage engine and any saved to-do items on the page:

Once the document is ready, click events are bound to the appropriate controls. When the “Add task” button is clicked, a list-item element is constructed with the contents of the task text field and a link to mark this task as done. The list item is then appended to the contents of the task list, and the task list is saved in local storage using the task list key. At a later time, the list can be retrieved using this key, as is being done in the engine.ready() callback:

When the “Remove all tasks” button is clicked, the element containing the to-do list is emptied of its contents. The task-list key and its associated value are then removed from local storage:

Lastly, a live event is bound to the done links for each item in the to-do list. By using the live() function, instead of the bind() function or a shortcut such as click(), all elements that match #task-list a will have the given function bound to the click event, even elements that do not yet exist at the time live() is called. This allows us to insert “done” links for each new item, without rebinding the click event each time the insertion occurs.
When an item is marked as done, it is removed from the list, and the updated list saved in local storage using the task-list key. Some care needs to be taken when saving the updated list:

In the case that the last item in the list is being removed, the taskList variable will be empty. This causes the store() function to be evaluated as if it were called with a single parameter, not two. When store() is passed a single parameter, the value held at that key is retrieved, and the saved list is unmodified. The goal is to save an empty list. The remove() function in the else clause removes the task-list key and its associated value. This meets the goal of setting the saved state to an empty list.


Traditionally, the only option available to store data on the client was cookies. The amount of data that can be stored in a cookie is very limited. Better alternatives now exist. The following table contains currently available storage mechanisms and their browser compatibility.


Insert BOX

DOM Storage and the SQL Storage API are part of emerging HTML standards. As such, they don’t yet enjoy thorough cross-browser support. Google Gears and Flash are browser plugins that can be used for client-side storage. Internet Explorer has, for some time, included the user Data behavior for client-side storage. If a single mechanism to support all major browsers is needed, a Flash or Google Gears–based approach offers support for the widest variety. However, it requires users to have a browser plugin installed.
Fortunately, jStore (available at affords a layer of abstraction, which enables cross-browser and client-side storage and, in most cases, doesn’t rely on browser plugins. jStore provides a unified interface to the storage mechanisms listed previously. While manual selection is supported, this example illustrates jStore’s ability to automatically select the appropriate storage mechanism for the browser currently in use. When viewed in different browsers, this recipe displays the currently selected storage mechanism.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics