Enable Dark Mode!
how-to-use-local-storage-and-session-storage-for-offline-functionality.jpg
By: Jumana Haseen

How to Use Local Storage & Session Storage for Offline Functionality

Technical

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


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message