JavaScript localStorage: complete guide on localStorage

JavaScript localStorage is a way to store data on the client’s computer. JavaScript localStorage allow to save key/value pairs in the browser. The data stored in local storage will not expire. This means the data will persist even if the tab or the browser window is closed.

Why localStorage?

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.
  • Also unlike cookies, the server can’t manipulate storage objects via HTTP headers. Everything’s done in JavaScript.
  • 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

JavaScript localStorage Methods

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:

MethodsDescription
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.

Add data

To add the data in localStorage, pass both key and value in setItem() function.

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

Retrieve data

It requires only the key to retrieve the data from storage and a JavaScript variable to store the returned data.

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

Remove data

It also requires only the key to remove the value attached with it.

localStorage.removeItem("city");  

Clear localStorage

It is a simple clear() function of localStorage, which is used to remove all the localStorage data:

localStorage.clear()  

Limitation of JavaScript 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:

  • 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.

Comments are closed.