In web development, Local Storage is a feature of modern web browsers that allows you to store data on a user's computer in key-value pairs. Code written in JavaScript and executed on the same domain can access and alter this data. When it comes to session storage, it plays a crucial role in managing and temporarily keeping data on the client side, session storage is essential. It enables developers of websites to preserve state and save data that is available to users for the duration of their visit.
Local Storage
Local Storage feature is a web storage mechanism that allows us to save data on the client’s browser and keeps the data there even when the browser window is closed. This data storage allows access to it over a specific domain. Local Storage can be used for a variety of purposes, such as saving user preferences and storing session information. Local Storage and Session Storage are comparable, with the exception that although session storage data is erased when a page is closed, local Storage data has no expiration time.
Working with Local Storage:
1) Storing Data
To store data in localStorage, we use the ‘setItem()’ method. A key and a value are two parameters it requires. To retrieve the value associated with it, use the key as the reference.
localStorage.setItem('key','value')2) Retrieving Data
To access data stored in the browser's localStorage object. This method accepts the key parameter and returns the value as a string.
localStorage.getItem('key')3) Deleting Data
To delete an item from localStorage, use the ‘removeItem()’ method. When passing a key, the removeItem() method removes the existing key from the storage.
localStorage.removeItem('key')Session Storage
Session Storage is a feature of the Web Storage API that provides a means of storing data on the client's browser. Session Storage, in contrast to local storage, is intended to hold data momentarily for a certain session. The amount of time a user stays on a website before closing their browser is referred to as a session.
Working with Session Storage:
1) Storing Data
To store data in session storage, use the sessionStorage object, which is a part of JavaScript's global scope. The "setItem()" method can be used to set key-value pairs.
sessionStorage.setItem('key','value')2) Retrieving Data
To retrieve data from session storage, you can use the ‘getItem()’ method by passing the key of the stored item.
sessionStorage.getItem('key')3) Deleting Data
The ‘removeItem()’ method can be used to remove an item from sessionStorage.
sessionStorage.removeItem('key')Both sessionStorage and localStorage maintain each accessible origin in a different storage region for the life of the page session. The biggest difference between them is that sessionStorage merely keeps track of the storage space. The browser remains open at all times (even during page reloads and restorations), and localStorage keeps storing data even when the browser is closed.
To read more about an overview session storage in JavaScript, refer to our blog An Overview Session Storage in JavaScript