Understand localStorage

What’s local storage?

The localStorage web API allows us to save and retrieve data from the local storage. The data remains in the browser’s storage, even if the browser is closed.

Store the item

We can store the item in the localStorage using the following syntax:

localStorage.setItem('key','Value')

Example: 
localStorage.setItem('name', "John Doe")

Here, the key is like the property name of the object in JavaScript, and Value is the property’s value.

Get the item

The localStorage object allows us to get items from the local storage using the given syntax.

localStorage.getItem('key')

Example:
localStorage.getItem('name')  // Joh Doe

Here, the key is the property name for which we’d like to retrieve the data.

Delete the item

The localStorage has two methods to delete items:

• To delete a specific item, for example, the property name, the following command can be used. It removes the property name from the localStorage.

  localStorage.removeItem('name')
  

• To clear all items from the localStorage, the following command can be used. It completely clears the localStorage.

  localStorage.clear()
  

How to access the local storage

To access the localStorage from Google chrome, we can perform the following steps:

1. Press “F12” or right-click on the screen and select “inspect” from the popup.
2. Click on the “Application” tab.
3. Select “Local Storage” from the “Storage section” on the left side.