Yogesh Chauhan's Blog

What’s a Web Storage API in JavaScript?

in JavaScript on March 10, 2021

The Web Storage API lets us store information on user’s browsers, just like cookies but in more intuitive way. We can store store information in key-value pair.

Web Storage API has two related mechanisms — sessionStorage and localStorage.

sessionStorage

As the name suggests, it works based on a session. From the start to the end of the session the data will be stored on user’s browser — as long as the browser is open. Once user closes the browser, the data will be dumped. The data will still be there if user refreshes the page.

One limitation of this way of storing data is that the data is never being transferred to the server. So, if you want to save some important user info for a long time then this is not a way to do that. It’s just meant for a short time data storage.

For e.g. if you want to create a game that doesn’t require a login and transfer of user data to server then this works best. Just store user score in the browser for a short time and as soon as user closes the browser, delete the data.

The positive thing about this sessionStorage is that we can store more data than a cookie — as much as 5MB storage data. That’s a lot of data we can store for a single session.

In short, sessionStorage stores as much as 5MB data per session as long as user doesn’t close the browser.

localStorage

I like localStorage better. The reason is that it keeps the data in the browser even if user closes the page or even the browser.

Also, the stored data doesn’t expire like cookies. You can clear the data using JavaScript code after a while.

If user clears the browser cache then the localStorage data will be removed.

How to use sessionStorage or localStorage to store the data in the browser?

We can use Window.sessionStorage and Window.localStorage to store data in the browsers.

If there a support available then the Window object implements the WindowSessionStorage and WindowLocalStorage objects. The localStorage and sessionStorage properties are attached to those objects.

When we invoke any of those properties, the browser will create an instance of a Storage object to store the data. We can use the same object to remove the set data or even retrieve the stored data.

If you use both the sessionStorage and localStorage to store the data then seperate objects will be created. They will be controlled separately and they function separately in that case.

Read more about it on MDN Docs


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
async function in JavaScriptJavaScriptUNION and UNION ALL in PostgresPostgresKilling A Project Part 3: How can an organization ensure that a doomed project is killed as early as possible?Miscellaneous@mixin and @include in SCSS (Sass)SCSSPHP arrays for US states’ full names and abbreviationsPHPHow to render Lists in React?React