Understanding Web Storage in HTML 5 Part II

In the previous blog post we looked at HTML5 Web Storage features. Mainly we focused on function for adding items to localStorage. And briefly we used couple of other functions to read the values back from the localStorage.

• setItem(key,value)
• getItem(key)
• length()
• key(i)

We used above functions to add item to the localStorage, find the storage length, and find the item by it's key.

Now, let's go ahead an look at the remaining two functions which are part of localStorage API.

• removeItem(key)
• clear()

These are the simplest one to understand. As their names suggests, the removeItem function is useful for removing a specific entry from the localStorage by it's key. And the later one is useful for removing all items form localStorage using a single call.

Remove Item From LocalStorage by Key

I have placed a input box and a button that takes key from the new input box and removes item from localStorage. It also calls our ShowLocalStorage function we created last time that shows all the items in the

.

We will continue enhancing the sample we created in the previous blog post. I have added following two JavaScript functions. To remove the item from the localStorage using a key we will need the relevant interface.

I opened the page and entered three values, or you might have them already if you are following from the previous blog post. I placed the keyname in the input and clicked Remove Item From Storage and item was removed from the localStorage.

Remove All Items From localStorage At Once

Next, we will add another button on our page as following.

And we have wired up the click event of this button to the new JavaScript function ClearStorage.

Go ahead and refresh the page. Once you click the Clear Storage button it will remove all the items from localStorage and we will see an empty ul.

Following is the final JavaScript we came up with over the period of last two posts. This helps you Add/Get/Remove/Clear , items To and From the localStorage.

What is sessionStorage ?

While looking on the web for Web Storage HTML5 APIs, you might see another type of storage available to us which is sessionStorage. So what is the difference between localStorage and sessionStorage ?

First of all , there is no difference in terms of how you read and write items to any of these storage. However the difference is in how long each of this storage will hold the values you have stored.

• localStorage

As the name suggests, this stores the values locally without defining any expiration time. That means, either you remove it from the localStorage or user explicitly clears the local data from his browser the data will stay as it is. So if your user closes his browser and reopens after a while or days,you can expect your values you stored in localStorage.

• sessionStorage

This is exactly opposite to localStorage. As soon as user leaves your site/page by closing the browser or browser Tab, the vales will be lost. So if you want to store something temporarily just during the current visit of your user, you can store then in sessionStorage and that way you are not storing data longer than needed on your user's browser.