STORAGE API - Web development Tutorials

The HTML5 brought a lots of amazing technologies in the web . It also brought API called Storage API. This api is used to set and retrieve data stored on user's device. This is better than cookies.

---

1. Apart from being an old way of saving data, Cookies give you a limit of 4096 bytes (4095, actually) - its per cookie. Local Storage is as big as 5MB per domain.
2. localStorage is an implementation of the Storage Interface. It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.

---

As you may have thought this property can be accessed using window object. This api has two properties namely sessionStorageand localStorage.(Remember we use camelcase in the name).

As you may have assumed the localStorage property stores data on user's device until it is deleted by the user (clearing cache) or by the script itself , whereas sessionStorage is deleted as soon as user leaves the site

A point to remember here is that this api may not work in incognito | private tabs.

JS

if(typeof(Storage)!=="undefined"){
//our code
}
else{
alert("Sorry Your browser is old");
}

We wrote above code to check whether the user's browser supports Storage API or not.
Let us check Whether this browser supports or not.

Now supposing the browser supports Storage api.

---

LocalStorage

---

JS

localStorage.setItem("lastname","Sharma");
//or you can use
localStorage.lastname = "Sharma";

You can use window.localStorage method also

JS

window.localStorage.setItem("firstname","Saurabh");
//or you can use
window.localStorage.firstname = "Saurabh";

Retrieving Item

---

The item can be retrieved by various methods

JS

localStorage.getItem("lastname");
//or assign it to a variable
var firstname = localStorage.firstname;

Or by using window object

JS

window.localStorage.getItem("lastname");
//or assign it to a variable
var firstname = window.localStorage.firstname;

---

Starting sessionStorage

---

It is too similar to localStorage , just replace localStorage with sessionStorage.

JS

sessionStorage.setItem("firstname","Saurabh");
// or 
sessionStorage.firstname = "Saurabh";
//or use window object
window.sessionStorage.setItem("lastname","Sharma");
//or 
window.sessionStorage.lastname = "Sharma";

Retrieving Item

---

JS

sessionStorage.getItem("firstname");
//or
var lastname = sessionStorage.lastname;