In web development, Local Storage is a functionality found in modern web browsers, enabling the storage of data on a user's computer in key-value pairs. JavaScript code running within the same domain can access and modify this stored data. Session storage, on the other hand, is pivotal for managing and temporarily retaining data on the client side during a user's session. It allows website developers to maintain state and store data accessible to users throughout their visit.
Storage on the local device
The Local Storage feature is a mechanism for web storage, enabling the storage of data on the client's browser. This data persists even when the browser window is closed and remains accessible within a specific domain. Local Storage serves various purposes, including saving user preferences and retaining session information. While Local Storage and Session Storage share similarities, such as storing data on the client side, Session Storage data is cleared when the browser session ends, whereas Local Storage data persists indefinitely without an expiration time.
Utilizing Local Storage:
1) Data Storage
To store data in localStorage, the 'setItem()' method is employed, requiring two parameters: a key and a value. To retrieve the associated value, reference it using the key.
localStorage.setItem('key','value')2) Accessing Stored Data
To retrieve data stored in the browser's localStorage object, you can use the getItem() method. This method requires the key parameter and returns the corresponding value as a string.
localStorage.getItem('key')3) Removing Data
To remove an item from localStorage, utilize the ‘removeItem()’ method. By specifying the key associated with the item, this method effectively deletes the corresponding entry from the storage.
localStorage.removeItem('key')Session Storage
Session Storage, part of the Web Storage API, offers a way to store data temporarily on the client's browser. Unlike local storage, Session Storage is designed to retain data only for the duration of a browsing session, which ends when the user closes their browser.
Utilizing Session Storage:
1) Storing Data in Session Storage:
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 fetch data from session storage, utilize the 'getItem()' method and provide the key associated with the stored item as its argument.
sessionStorage.getItem('key')3) Deleting Data
You can utilize the 'removeItem()' method to eliminate an item from sessionStorage.
sessionStorage.removeItem('key')sessionStorage and localStorage each maintain a distinct storage area for every accessible origin throughout the page session's lifespan. The key disparity between them lies in their persistence: sessionStorage retains data only for the duration of the page session, persisting as long as the browser remains open, while localStorage continues to store data even when the browser is closed.