JavaScript: Charms of localStorage and sessionStorage

I recently developed a HTML5 app which was basically a totally offline sticky notes app. It could save all your sticky notes and load them even if you closed your browser and came back. It is achieved using the JavaScript local storage API.

Here are some screenshots of my “StickIt!” app:

Splash Screen
The splash screen of StickIt.
Main Page
The main page of StickIt
Note add GUI
Note add GUI

JavaScript has APIs like the local storage and session storage to store data locally on the client’s PC. It helps store data that is user-specific; like shopping cart data, or like I did, a sticky note app.

The local storage preserves data even when the browser is closed whereas the session storage deletes everything once the browser window closes.

The APIs are very easy to use. I will demonstrate localStorage here. You can use the sessionStorage similarly:

1. Checking whether localStorage is supported or not:

It is essential to check anything and everything before using it. To check whether localStorage is available on the client browser, simply run an if statement like this:

if (window.localStorage) alert("Local storage is supported.");
else alert("Please update your browser");

If it is supported then you can proceed to the next step.

2. Storing items in the localStorage:

The API stores data in key-value pairs. For example, the key would be “somekey” and the value stored in that key would be “mydata”. The key is used to store, retrieve or modify any values.

To store an item, you can call as follows:

var storedData = localStorage.setItem("somekey", "mydata");

And done. You have now stored your data in the browser’s local storage.

3. Retrieving items from the localStorage:

To get the item simply call it like passing the key with which it was stored:

var retrievedData = localStorage.getItem("somekey");

OR simply:

var retrievedData = localStorage["somekey"];

4. To remove items from localStorage:

Data should be removed when their need is finished. You can remove items by calling the removeItem() method.

localStorage.removeItem("somekey");

If you are storing several items, you can iterate through the local storage (or session storage):

for (var i = 0; i < localStorage.length; i++) {
  console.log(localStorage[i]);
}

You can even clear everything at once:

localStorage.clear();

That’s all there is to localStorage. The same methods listed above are available for sessionStorage as well. If you have any queries feel free to leave a comment below.

If you want the source code for the StickIt app pictured above, you can download it here.

Advertisements

One thought on “JavaScript: Charms of localStorage and sessionStorage

Your Thoughts -

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s