HTML5 Web Storage API Storing information locally

Storage Example

We are starting these notes with an example of an application that lets a user create sticky notes on a web page. The whole process is described step by step in the supplemental reading. You can open the application on a new page and try it out on your own (type some text on the input box and then click the button). Below is how the page looks like after I have added four notes.

This example is interesting also because it uses some sophisticated CSS3 features (such as transition) to create animation effects for the sticky notes.

Web Storage API

HTML5 introduced several Javascript APIs (Application Programming Interfaces) that are now directly accessible from the browser, without having to write custom code or import external libraries. Some examples are the Geolocation API (that can locate the geographical location of a user and perform other related operations), the Canvas API (that allows drawing 2D graphics and animation on the webpage), or the Web Storage API that allows web applications to store data locally on the device of the user. That is, the data is stored on your laptop, not in the cloud or on a server somewhere, so it's not available to other people. Still, local storage can be useful.

The Web Storage API creates an internal object named localStorage that we can access directly in our Javascript programs in the same way that we access window or document. Through this object we gain access to its methods that allow us to store data locally, retrieve them, iterate through them, or remove them when we desire.

We have summarized these properties and methods in the table below:

Method/ Property	Usage Example
.length	localStorage.length The number of items stored in the storage.
.setItem()	localStorage.setItem("zip", "02481") Stores an item as a pair of a key and value.
.getItem()	localStorage.getItem("zip") Retrieves the value stored under the key that is passed as an argument to the method.
.clear()	localStorage.clear() Removes all items stored in the local storage.
.removeItem()	localStorage.removeItem("zip") Removes only one item, whose key is passed as the argument.
.key()	localStorage.key(1) Retrieves the name of the key with index 1 (imagine that keys are stored in a array and we can access each of them through the index).

Code Snippets

We can inspect the content of the localStorage at any time, by using the Inspect Element window. If you haven't yet run any of our examples that use localStorage, its content is going to be empty, and you can view it like shown in the image below (that is, choose the tab Resources, and under Local Storage click on the URL for our website):

In the following we are providing a series of statements that show how to use the different properties and methods of localStorage, so that you get some practice with them.

The last alert result, "Key name for index=2 is: zip" should surprise you, since we are used to array indexing where the first element has index 0, the next one has index 1, and so on. According to that pattern, you might have expected that index=2 referred to the key "state". However, inside the localStorage, the keys are stored alphabetically (not in the order in which they were introduced), thus, "zip" happens to have index 2 out the three items stored so far (because the other keys start with letters "smaller" than z). To test this, enter the following two lines at the end of the textarea and execute the code again.

localStorage.setItem("address", "105 Central St.");
alert("Key name for index = 0 is: " + localStorage.key(0));

Notice how the index of "address" is 0, even if it was the last item added to the storage.

Here is some more code to execute:

Can you explain why we got a wrong result? Find a way to fix the problem.