We already have cookies. Why additional objects?
- Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that.
- The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can’t access data from each other
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:
|setItem()||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, pass both key and value in setItem() function.
const res = localStorage.getItem("city");
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:
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:
- Do not store sensitive information like username and password in localStorage.
- localStorage has no data protection and can be accessed using any code. So, it is quite insecure.
- You can store only maximum 5MB data on the browser using localStorage.
- localStorage stores the information only on browser not in server-based database.
- localStorage is synchronous, which means that each operation executes one after another.
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:
- The data collected by localStorage is stored in the browser. You can store 5 MB data in the browser.
- There is no expiry date of data stored by localStorage.
- You can remove all the localStorage item by a single line code, i.e., clear().
- The localStorage data persist even after closing the browser window, like items in shopping cart.
- It also has advantages over cookies because it can store more data than cookies.