Understanding Local Storage

The Web Storage API for JavaScript provides mechanisms for browsers to store key/value pairs. For each web browser, the size of data that can be stored in web storage is at least 5 MB per origin. The localStorage is defined in the Web Storage API for JavaScript. We need to use JS interop to access localStorage on the browser.

The browser's localStorage is scoped to a particular URL. If the user reloads the page or closes and reopens the browser, the contents of localStorage are retained. If the user opens multiple tabs, each tab shares the same localStorage. The data in localStorage is retained until it is explicitly cleared since it does not have an expiration date.

Tip: Data in a localStorage object that is created when using an InPrivate window or Incognito window is cleared when the last tab is closed.

Methods of local storage

These are the methods of localStorage:

• key: This method returns the name of the indicated key based on its position in localStorage.

• getItem: This method returns the value for the indicated key from localStorage.

• setItem: This method takes a key and value pair and adds them to localStorage.

• removeItem: This method removes the indicated key from localStorage.

• clear: This method clears localStorage.

Tip: sessionStorage is also defined in the Web Storage API. Unlike localStorage, which shares its value between multiple browser tabs, sesssionStorage is scoped to an individual browser tab. Therefore, if the user reloads the page, the data persists, but if the user closes the tab (or the browser), the data is cleared.

To view the content of the browser's localStorage, open “Developer tools” (“F12”) and select the “Application” tab. Look for “Local Storage” in the “Storage” section of the menu on the left. The following screenshot shows the “Application” tab of the “DevTools” dialog: