JavaScript localStorage

LocalStorage is a type of web storage that stores data. JavaScript sites and apps can store and access data without expiration dates. The data will always be persisted and will not expire. Even after closing the browser window, data stored in the browser will be accessible.

The localStorage holds the data with no expiration date, which is available to the user even after the browser window has been closed. As a result, it is useful in a variety of ways, such as remembering the contents of the shopping cart or enabling users to log in on any website.

In the past, cookies were the only means of storing temporary and local information, but localStorage now offers the same capability. Cookies have a storage limit of 4MB, while local storage has a limit of 5MB. Additionally, it is not sent with every HTTP request. Consequently, it is a better choice for client-side storage now. LocalStorage should be noted for the following reasons:

• Data stored in localStorage is not secure and can be accessed by any application. As a result, it is quite insecure.
• The advantage of localStorage over cookies is that it can store more data. LocalStorage allows you to store up to 5MB of data on your browser.
• Instead of storing the information in a database, localStorage stores the information only on the browser. Thus, localStorage cannot replace a server-based database.
• Unlike asynchronous storage, localStorage executes each operation sequentially.

localStorage Methods

There are several methods available for using the localStorage. All of these localStorage methods will be discussed with examples. The following is a brief overview of these methods:

Each of these methods uses the localStorage keyword followed by the dot(.) character. An example would be localStorage.setItem().

Remember that localStorage property is read-only.

Following are some codes that can be used to add, retrieve, remove, and clear data in localStorage. Whenever necessary, use them in your code. To add data to localStorage, you will need a key-value pair. Therefore, let key be city and value be Noida, i.e., key: value = city:Hyderabad.

Add data

In order to add the data to localStorage, both the key and value must be passed to setItem().

localStorage.setItem("city", "Hyderabad"); 

Retrieve data

Only the key is required to retrieve the data from storage and a JavaScript variable is required to store the returned data.

const res = localStorage.getItem("city");

Remove data

The value attached to the key can also be removed by removing only the key.

localStorage.removeItem("city");

Clear localStorage

The clear() function of localStorage clears all the data in localStorage:

localStorage.clear()