Sometimes, it is better to access data from the browser rather than sending requests to the server. The 3 ways to store data in the browser are Cookies, Local Storage, and Session Storage. Depending on the needs any one of them is used to store data in the browser.
In today's article, we will discuss an in-depth comparison between local storage, session storage, and cookies. Let's get started.
Cookies vs Local Storage vs Session Storage
To have a basic understanding of the similarities and the differences between them, see the chart below:
Cookies vs local storage vs session storage | Reference
So there are some similarities and also some differences between the three. Local storage and sessions storage have more similarities and they are comparably new. Cookie is the oldest among them and different in many ways than the other two.
All three of them are browser-independent. That means if some data is stored in one browser, it will not be stored in a different browser on the same machine. For example, the data stored in Google Chrome will not be stored in Firefox on the same computer.
Also, different users do not share cookies or local storage between them. So if some data is set for one user, none of the other users will be able to see that.
If you open the developer tool from your browser and go to the "Application" section, you will be able to see the 3 types of storage.
3 types of storage from the browser | Screen captured by the author
Now let's talk about each one of them individually.
Cookies are the oldest way of storing data in the browser. It is available in both HTML4 and HTML5. Cookies are basically some text-based data with a name-value pair. Cookies can only store 4 KB of data which is much smaller than local storage and session storage.
Cookies are a convenient way to carry data from one session to another on a website. It can be used for authentication purposes and also for identifying the state of a user. For example ---
- When a user logs in to a website, the server sets a cookie. So the server can recognize that the user is logged in for other sessions.
- When shopping from an e-commerce website, if a user adds an item to the cart, usually a cookie is set. So if the user refreshes the page the item will still be in the cart list, and the user can add more items from this state.
We can access cookies from the browser using
document.cookie property. The value of
document.cookie consists of
name=value pairs. See the following example.
document.cookie = 'name1=value1'
The above expression will update a cookie named 'name1' with the value 'value1'.
You can see the cookie added to the browser by inspecting the page.
document.cookie= expression can add one cookie. Let's add two more cookies.
document.cookie = 'name2=value2'\ document.cookie = 'name3=value3'
document.cookie will show all three of the cookies.
You can also raise an alert by using
Depending on the browser, local storage has a capacity of 5-10 MB. It was introduced in HTML5. Local storage stores data only in the browser and never expires unless manually removed. Local storage can be accessed from any window. That means if a user closes the browser local storage will be saved next time the user opens it again.
You can access local storage by using the
localStorage property. Local storages are string values with key-value pairs. See the example below.
localStorage.setItem('key1', 'val1');\ localStorage.setItem('key2', 'val2');\ localStorage.setItem('key3', 'val3');
Three items in the local storage are added.
setItem() method sets the values for local storage. The
getItem() method will get items from local storage. You need to put the key inside
getItem() to get a value. Using
console.log() you can then print the values.
console.log(localStorage.getItem('key1'));\ console.log(localStorage.getItem('key2'));\ console.log(localStorage.getItem('key3'));
localStorage.clear() will clear the entire local storage.
To remove one item you can use
localStorage.remove(). Again you need to put the key inside the method.
console.log(localStorage.getItem('key1')); will return
You can also save an array to local storage.
_let_ arr = ['val1', 'val2', 'val3'];\ localStorage.setItem('keys', arr);
arr will be stored in the local storage. But the whole array will be stored as a string. To solve this problem you can use
_let_ arr = ['val1', 'val2', 'val3'];\ localStorage.setItem('keys', JSON.stringify(arr));\ x = JSON.parse(localStorage.getItem('keys'));\ console.log(x);
So there are four main operations in local storage:
localStorage.setItem();\ localStorage.getItem();\ localStorage.removeItem();\ localStorage.clear();
Session storage is mostly similar to local storage. The only difference is session storage will be deleted after a session. That means if you save something in session storage and close your browser you will not be able to see the data after you open the browser again. Session storage has a capacity of 5 MB.
All the operations described in local storage are also valid for session storage. To access session storage you need to use the
sessionStorage property. Others are pretty much the same as local storage.
To add data to session storage you will use
sessionStorage.setItem() with a key-value pair.
IsThisFirstTime_Log_From_LiveServeris there because I was using the live server extension from VS Code.
As you can see
val1 is added to the session storage.
sessionStorage.clear() will work exactly the same as local storage.
If you close the browser tab the session storage will be gone.
Local storage and session storage together can be referred to as web storage. Web storage is used to save data for quick access. Like users custom data. For example ---
- Suppose a website has light/dark mode. If a user sets the dark mode in the browser, the data can be stored in local storage. The data is saved in local storage for this user only. This way when the user opens the website from the browser again, dark mode will be enabled automatically.
Choose What To Use When
So the use case depends on the need.
That's it for today. I hope you got a good grasp on cookies, local storage, and session storage from this article. Thanks for reading!