Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between Local Storage, Session Storage, and Cookies in JavaScript
JavaScript provides three mechanisms for storing data on the client − cookies, session storage, and local storage. Each one has advantages and disadvantages.
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.
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.
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.
In this tutorial, we are going to look at each of them in detail.
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. This method takes the key as an argument and removes the data that is stored under that key.
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 method 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 stored. | The storage capacity is limited to 4KB of data. |
| The stored data is not deleted when the browser is closed. | The data is stored only for the session and will be deleted when the browser is closed. | The data can be set to expire at a certain time. |
| Local storage is useful for storing data that the user will need to access later, such as offline data. | Session storage is a great way to improve the performance of your web applications. | Cookies are a good choice for storing data that should not be persisted for a long time, such as session IDs. |
| This is especially useful for storing data that you want to persist even if the user closes the browser, such as preferences or settings. | Session storage is useful for storing data that is sensitive, such as login credentials. | Cookies are often used to store data that is not sensitive, such as user preferences |
| Local Storage is a new feature introduced in HTML5 | Session Storage is a new feature introduced in HTML5 | Cookies are the oldest (HTML4) and most wellknown mechanism. |
| The data is not sent with the request from the client to the server. | The data is not sent with the request from the client to the server | The data is sent with the request from the client to the server |
| The data is stored on the browser and system. | The data is stored on the browser only. | The data is stored on the browser only. |
Conclusion
In this tutorial, we discussed the differences between local storage, session storage, and cookies. We have seen different methods to store and retrieve data from this storage. Local storage is the most recent mechanism. It allows for larger amounts (10MB) of data to be stored, but the data is not deleted when the browser is closed. 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. 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.
37K+ Views
To Continue Learning Please Login