How Web Storage Works – Local vs Session Storage Explained

Anyone who works with the web needs to store data for a later use. Backend developers
have some powerful databases in their toolkit. But if you are a frontend developer, you can
still store and process data using web storage.
What is Web Storage?
Web storage is an HTML5 feature that allows you to store data in key-value pairs in the
browser. This enables applications to store data in the client side so you can access it or
manipulate it later. All data stored in web storage stays in the browser and is not
transferred anywhere else.
Types of web storage
The two main types of web storage are local storage and session storage. Each one has its
own unique characteristics.
But one thing they have in common is that they store the data in the particular browser
the user uses to access the webpage. You won't be able to access the same data through
another browser.
1. Local Storage
Local storage can store 5MB of data per app for the lifetime of the app.
Closing the browser will not affect the data in any way – it stays there unless you
delete it.
You can only access the local storage object through localStorage. The
methods you can use to perform operations on the localStorage object are:

localStorage // to access the localStorage object

localStorage.setItem('name', 'John') // sets name equal to john localStorage.getItem('name') // "John"
localStorage.removeItem('name') // removes name from the localStorage localStorage.clear() // clears the
localStorage
In the example above, we first created an array score, then converted it into a
string using JSON.stringify(), and finally saved the stringified scores array in
localStorage.

Note that the key scores has a value equal to our stringified scores array. But
if we don't convert the scores array into a string, our array will loose it's structure
and the items will be saved as a string like below:

const scores = [10, 8, 6, 3, 9]

localStorage.setItem('scores', scores)
localStorage // output >> {scores: '10, 8, 6, 3, 9', length: 1}
Let's also run the code in the browser console to see what is logs to the
console:
 See how our scores array is converted into a string when we do not convert it
into a string using JSON.stringify()?
2. Session Storage
Session storage allows you to store data in the browser depending on the
system memory and the data stored in the browser until the browser is closed. In
other words, closing the browser will clear all the data stored in session storage.
Like localStorage, you can access session storage by typing sessionStorage in
the browser console.

sessionStorage // access the session storage

sessionStorage.setItem('name', 'John') // add name to session storage with value john
sessionStorage.getItem('name') // get the name item from session storage
sessionStorage.removeItem('name') // remove name item from the session storage
sessionStorage.clear() // clear the session storage

sessionStorage.setItem() takes a key and value as parameters and sets a new item in the
local storage object equal to the given key value pair.
sessionStorage.getItem() takes key as a parameter and returns the value stored to that key
in the storage.
sessionStorage.removeItem() takes in a key as parameter and removes the corresponding
key-value pair.
sessionStorage.clear() clears the whole localStorage object.
Like localStorage, any item stored in sessionStorage will be stored as a string.
This means we need to convert them into strings before storing in the sessionStorage.

Web Storage Example Use Cases

You can use local storage when you want your data to be made available when the
user revisits the web page, such as for a shopping cart or game/quiz score. Just keep in
mind that the information saved in local storage should not be sensitive.

You can use session storage when the data that needs to be saved is sensitive. User
authentication is an example of data that you would like to clear as soon as the user closes
the tab.
 JavaScript provides three mechanisms for storing data on the client − cookies,
session storage, and local storage. Each one has advantages and disadvantages.

1. Local storage is the most recent mechanism. It allows for larger amounts of data
to be stored, but the data is not deleted when the browser is closed. Local storage
is useful for storing data that the user will need to access later, such as offline
data.
2. Session storage is similar to cookies, but the data is only stored for the current
session. This means that the data will be deleted when the user closes the
browser. Session storage is useful for storing data that is sensitive, such as login
credentials.
3. Cookies are the oldest and most well-known mechanism. They are simple to use
and well supported by browsers. However, they are limited to 4KB of data and
are often used to store data that is not sensitive, such as user preferences.

Local Storage
Most web applications these days require some type of user input, whether it be for a
username, shipping address, or even just a preferences setting. This input is then usually sent off
to a server somewhere to be processed and stored. However, what if your application needs to
store data locally on the user’s computer? This is where Local Storage comes in.
Local Storage is a type of web storage that allows JavaScript to store and access data right
in the browser. This is especially useful for storing data that you want to persist even if the user
closes the browser, such as preferences or settings.
The data in Local Storage is stored in key/value pairs. The key is like the name of the data,
and the value is like the actual data itself. You can think of it as a variable in JavaScript.
To store data in Local Storage, you first need to create a key. Then you can store any data
you want under that key.
To create a key, you use the setItem() method. This method takes two arguments,
the first is the key, and the second is the value you want to store.
localStorage.setItem('key', 'value');
Now that you have a key, you can store any data you want under that key. The data
you store can be any data type that JavaScript supports, including strings, numbers,
objects, and arrays.
To store data, you use the setItem() method again. This time, you pass in the key as
the first argument and the data you want to store as the second argument.
localStorage.setItem('key', 'value');
To retrieve data from Local Storage, you use the getItem() method. This method takes the key as
an argument and returns the data that is stored under that key.
localStorage.getItem('key');
If you want to remove an item from Local Storage, you use the removeItem() method.
localStorage.removeItem('key');
Session Storage
Session Storage is a type of web storage that allows web applications to store data locally
within the user's browser. Unlike cookies, data stored in session storage is specific to the
site on which it was created and data is not shared with other sites.

Session Storage is a new feature introduced in HTML5 that allows you to store data
locally in the user's browser. Unlike cookies, data stored in session storage is specific to
the site on which it was created and data is not shared with other sites.
Session Storage is a way of storing data on the client side of an application. It's
similar to local storage, but with a few key differences −
Session Storage data is only available to the site that created it.
Session Storage data is not shared with other sites.
Session Storage data is not persistent, meaning it is only available for the duration
of the user's session on a site.
Session Storage data is specific to the browser tab in which it was created.
Session Storage is a great way to improve the performance of your web applications
by reducing the amount of data that needs to be transferred between the client and server.
It can also be used to store data in a more secure way since the data is not stored in cookies
where it can be accessed by third-party sites.
To use Session Storage in your web applications, you'll need to use the
sessionStorage object. This object provides access to the current session's storage.
The sessionStorage object has two methods
setItem() − This method sets a key/value pair in the session storage.
sessionStorage.setItem("name", "tutorialsPoint");
getItem() − This retrieves the value of a key from the session storage.
var name = sessionStorage.getItem("name");
The sessionStorage object also has a couple of other properties −
length − This property returns the number of key/value pairs in the session storage.
key() − This method accepts an index as a parameter and returns the key at that
index in the session storage
Session Storage is a great way to improve the performance of your web applications
and store data in a more secure way.
Cookies
A cookie is a small piece of data that is stored on the user's computer. Cookies are used to
store information about the user such as their name, password, and preferences.
Cookies are created using the document.cookie property. This property is used to set, get,
and delete cookies.
Setting a Cookie :A cookie is set using the setItem() method. This method accepts two
arguments, the name of the cookie and the value of the cookie.
 The name of the cookie is used to identify the cookie, and the value is the
information that is to be stored in the cookie.
The following code sets a cookie with the name "name" and the value
"tutorialsPoint".
document.cookie = "name=tutorialsPoint";
Reading a Cookie
A cookie is read using the getItem() method. This method accepts the name
of the cookie as an argument and returns the value of the cookie.
If the cookie does not exist, the getItem() method will return null.
The following code reads the "name" cookie and stores the value in the "user"
variable.
var user = document.cookie.getItem("name");
One advantage of cookies over local Storage and session Storage is that they
can be set to expire at a certain time, which makes them a good choice for storing
data that should not be persisted for a long time, such as session IDs.

Difference between Local Storage, Session Storage, and Cookies

The following table highlights the major differences between Local Storage, Session Storage, and
Cookies −

Local Storage Session Storage Cookies

It allows 10MB of data to be stored. It allows 5MB of data to be The storage capacity is limited to
stored. 4KB of data.

The stored data is not deleted when The data is stored only for the The data can be set to expire at a
the browser is closed. session and will be deleted when certain time.
the browser is closed.

Local storage is useful for storing data Session storage is a great way to Cookies are a good choice for storing
that the user will need to access later, improve the performance of data that should not be persisted for a
such as offline data. your web applications. long time, such as session IDs.

This is especially useful for storing Session storage is useful for Cookies are often used to store data
data that you want to persist even if storing data that is sensitive, that is not sensitive, such as user
the user closes the browser, such as such as login credentials. preferences
preferences or settings.

Local Storage is a new feature Session Storage is a new feature Cookies are the oldest (HTML4) and
introduced in HTML5 introduced in HTML5 most wellknown mechanism.

The data is not sent with the request The data is not sent with the The data is sent with the request from
from the client to the server. request from the client to the the client to the server
server

The data is stored on the browser and The data is stored on the The data is stored on the browser
system. browser only. only.