Voice of a Developer: Web Storage API

Note: There was a way in Firefox 9, i.e., globalStorage but it was deprecated after HTML5 introduced this local storage.

Access client-side storage

These are available via Window.sessionStorage & Window.localStorage. Both of these provide access to create, get, modify, delete client-side storage depending upon session or local store.

Facts about client-side storage

How much storage does browser provide?

Generally, 5MB, 5MB is available for sessionStorage& localStorage respectively.

How can we check the available storage in our browser?

You can leverage utility to run these tests at your browser and it will show you the output. I conducted test at my browser Chrome 50 & Firefox 45 and both gave same result, i.e., 5 MB.

Misconception

Please note 5MB does not mean 5 million characters are allowed. Developers think that each character occupies 1 byte, which is correct for some programming languages. But JavaScript occupies 2 bytes each character as it stores string on basis on UTF-16.

localStorage

Write localStorage

Below code will write data into localStorage and using setItem() function:

<script>
localStorage.setItem("fname", "Sumit");
localStorage.setItem("lname", "Jolly");
localStorage.setItem("profile", "http://www.c-sharpcorner.com/members/sumit-jolly");
</script>

Configure a website in local Web server and run URL: http://localhost:8079/test.html

You can see ‘Local Storage’ content in browser after clicking Resources in Chrome.

If you run on Firefox then it will also create a Local Storage but the view is disabled by default. To enable it goto ‘Toolbox options’ and click Storage checkbox.

Aforesaid, localStorage has no expiration and even you close browser it’ll stay there. You can try this and would be able to see data in localStorage of browser.

Read localStorage

You can retrieve data from localStorage using getItem() function. I prefer iterating to KVP.

Example

(function() {
for (var i = 0; i < localStorage.length; i++){
console.log(localStorage.getItem(localStorage.key(i)));
}
})(); // self-invoking function will give below output

Output

Sumit
Jolly

http://www.c-sharpcorner.com/members/sumit-jolly

There are many other functions and properties you can explore like removeItem, clear, length.

sessionStorage

It is the same as localStorage with the difference that it is associated with session only. After you close browser window it is gone. I believe if you have more security aspect than go for sessionStorage rather localStorage.

Cookies

For many years, cookies are used to remember user information. So whenever a user visits page his/her information is stored in a cookie. It is also saved as KVP.

A simple cookie can be created like:

document.cookie = "fname=Sumit";
document.cookie = "lname=Jolly";
console.log(document.cookie); // fname=Sumit; lname=Jolly

You can check it in browser Resources Developer Tools.

Notice an expiry date is set to Session. The reason we have not defined an expiry date to a cookie, so the default is session.

You could do via setting an expiry date along with.

document.cookie = "fname=Sumit; expires=Mon, 15 Aug 2016 12:00:00 UTC";

Here are the differences between the three storage types we discussed:

localStorage	sessionStorage	Cookies
Not added	Not added	Added to every HTTP request
No expiry	date Expire with session	Has both features i.e., session and you can define expiry date
Limit of 5MB	Limit of 5MB	Cookies give you a limit of 4096 bytes

Summary

Now the world is going towards fat client and thin server. With browsers becoming more capable of faster processing of data and power with various resources, think of the client before the server for good performance of your web application.

8 Comments

Join the conversation! Your thoughts help the community grow.

Rajib Das Gupta10y ago
Nice
Neeraj Kumar10y ago
Good one
Kuppurasu Nagaraj10y ago
Nice sharing..
Debasis Saha10y ago
Nice one..
Guest User10y ago
Sure, I'll take care in future to add shortcut F12
Guest User10y ago
Thanks for your comments! I liked silver jubilee word :)
Bhuvanesh Mohankumar10y ago
Sumit Jolly: Small suggestion, some beginners have issue to find Developer Tools, you can add the short cuts [F12], which may be helpful.
Bhuvanesh Mohankumar10y ago
Great Silver Jubilee Article of the series, Nice one

Voice of a Developer: Web Storage API - Part 25

Introduction

Key-Value pair (KVP)

Web Storage API