localStorage vs. sessionStorage – Explained

Posted on: May 14, 2020 by Wisdom Ekpot

HTML5 local storage makes it possible to store values in the browser which can survive the browser session.

Session storage is available inside the same browser window for as long as the window is open. When the browser window is closed, the session storage associated with that window is deleted. Multiple windows from the same origin (URL) cannot see each others session storage. Popup windows opened from the same window can see session storage, and so can iframes inside the same window.

Local storage is available in the browser to all windows with the same origin (domain). Data stored in the local storage is also available after the window has been closed. The next time a window is opened and loads the page from the same origin, the page can access the stored values there again.

The properties set in the HTML5 local storage can only be read by pages from the same domain as the page that set the properties.

HTML web storage provides two objects for storing data on the client:

window.localStorage: stores data with no expiration date

window.sessionStorage : stores data for one session (data is lost when the browser tab is closed).

Note that localStorage and sessionStorage accomplish the exact same thing and have the same API.

Its always a good idea to check if the browsers supports localStorage and sessionStorage.To check that run this code:

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Display an error message showing that the browser doesn't support web storage
}

localStorage syntax

localStorage.setItem(key,value);

Basically localStorage is a key-value pair.You have to provide the item a key and a value.

Creating Item

Create key/value pair entries with localStorage.setItem providing a key and a value:

let info = 'Some piece som information'
localStorage.setItem("junk", info);

It could also be written this way:

let info = 'Some piece som information'
localStorage.junk = info;

Reading Item

Here we use the getItem method. The name of the localStorage key is passed as a parameter.

let storedJunk = localStorage.getItem(junk);

localStorage will always return value in string. So if required, then one need to cast the value in needed type.

Updating Item

Updating the value of an item is quite easy. You can do that by using the setItem method but with the key that already exists:


localStorage.setItem(key, 'New Value of this item');

Deleting Item

To delete an item, we use the removeItem methods:


localStorage.removeItem(key);//here key is the key of the item you want to delete

Clear localStorage

You could also clear everything you have stored in localStorage using the clear method:


localStorage.clear();

SessionStorage

All the example written for localStorage can be used for sessionStorage too.Example:

Set sessionStorage:

sessionStorage.setItem(key,value)

or you could use this method:


sessionStorage.key = value;

Get sessionStorage:

Use the getItem method to get the item from session storage. Here the key is passed as a parameter:


sessionStorage.getItem(key);

Remove sessionStorage item

Use the removeItem method to remove item from session storage:

sessionStorage.removeItem(key);

You could also use the clear method to remove all session items just like we have in localStorage.

Conclusion

Storing Data using that sessionStorage object is a really useful way to keep data on the client-side. Obviously this has some outstanding security flaws where data could be easily accessed without the user’s permission. Always ensure encrypt your data before storing them.