What is localstorage and session storage 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 −

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.

Updated on 29-Jul-2022 08:20:15

• Related Questions & Answers
• Difference between Session Storage and Local Storage in HTML5
• What is the difference between local storage vs cookies?
• Difference between Memory and Storage
• Thread-local storage (TLS)
• Difference between Storage Area Network (SAN) and Network Attached Storage (NAS)
• Retrieve element from local storage in JavaScript?
• What is the difference between session and cookies?
• Storing Credentials in Local Storage
• Set the value in local storage and fetch – JavaScript?
• HTML DOM Local Storage clear() method
• Trick to store credentials in local storage
• How to enable Web view session storage in android?
• Android 4.0.1 breaks WebView HTML 5 local storage?
• Checking if a key exists in HTML5 Local Storage
• Volatile Storage vs Non-Volatile Storage
• HTML 5 local Storage size limit for sub domains

What is difference between localStorage and session storage?

What is localStorage in JavaScript?

What is local storage and session storage in react JS?

What is a session storage?