In short, all we can say is that the localStorage holds the data with no expiry date, which is available to the user even after closing the browser window. It is useful in various ways, such as remembering the shopping cart data or user login on any website.
In the past days, cookies were the only option to remember this type of temporary and local information, but now we have localStorage as well. Local storage comes with a higher storage limit than cookies (5MB vs 4MB). It also does not get sent with every HTTP request. So, it is a better choice now for client-side storage. Some essential points of localStorage need to be noted:
The localStorage offers some methods to use it. We will discuss all these localStorage methods with examples. Before that, a basic overview of these methods are as follows:MethodsDescriptionsetItem()This method is used to add the data through key and value to localStorage.getItem()It is used to fetch or retrieve the value from the storage using the key.removeItem()It removes an item from storage by using the key.clear()It is used to gets clear all the storage.
Each of these methods is used with localStorage keyword connecting with dot(.) character. For Example: localStorage.setItem().
Following some codes given, which are used to add, retrieve, remove, and clear the data in localStorage. Use them in your code accordingly whenever needed. You need a key-value pair to add some data in localStorage. So, let key is city and its value is Noida, i.e., key: value = city: Noida.
To add the data in localStorage, both key and value are required to pass in setItem() function.
It also requires only the key to remove the value attached with it.
It is a simple clear() function of localStorage, which is used to remove all the localStorage data:
Limitation of localStorage
As the localStorage allows to store temporary, local data, which remains even after closing the browser window, but it also has few limitations. Below are some limitations of localStorage are given:
Advantage of localStorage
The localStorage has come with several advantages. First and essential advantage of localStorage is that it can store temporary but useful data in the browser, which remains even after the browser window closed. Below is a list of some advantages:
With the help of below code example, you can check the browser compatibility. Use this code in your every localStorage program to check the browser compatibility before adding or deleting something from localStorage.
It is a basic example of adding a key and value to localStorage and retrieving back by the key. See the code below how localStorage methods work:Test it Now
It is an example to count the button clicks means that it will count how many times a user clicks the button. In this example, we will create two buttons, one for counting the user clicks and another for clear the that clicks data.Test it Now
In the below output, you can see that we have clicked the Click to Count button 9 times.
Now close the window tab and reopen to run the code again. Again, click on the Click to Count button, it will start counting from 10 where you left.
Now, click the Clear Count button to clear the stored data. When you again click on the Click to Count button, it will again start with 1.
Clear all records
Clear() method of localStorage is used to clear the entire storage data. When this method invokes, it clears all the records for that domain from the storage. It does not contain any parameters. See the syntax to clear the localStorage:
We will use this clear code in below example.
How do I add items to localStorage?
Storing an object in localStorage The values that are stored in the localStorage should be of the string datatype. To store an object or an array in the localStorage , we first need to convert it to string using the JSON. stringify() method. Next, we can pass it as the value in the setItem() method.
How do I append a value in localStorage?
Appending data to a localStorage() array # localStorage() only stores string values. If there's already saved data, we'll convert it to an array. Otherwise, we'll create one. Then, we'll push our new value to the array and save it back to localStorage() , running it through toString() to convert it back to a string.
How to add JSON in local storage?
Store data: localStorage.setItem(key, value).
Read data: localStorage.getItem(key).
To store JSON data, convert the value with JSON.stringify(value).
To convert JSON data JSON.parse(value).
In React, use useEffect to deal with side effects. ... .
Can JSON values be added in localStorage?