Local Storage & Session Storage

Example demonstrating Local Storage and Session Storage usage:

// Save data to Local Storage
localStorage.setItem('username', 'BashaRam');

// Retrieve data from Local Storage
const user = localStorage.getItem('username');
console.log('Local Storage username:', user);

// Remove data from Local Storage
localStorage.removeItem('username');

// Save data to Session Storage
sessionStorage.setItem('sessionID', 'abc123');

// Retrieve data from Session Storage
const session = sessionStorage.getItem('sessionID');
console.log('Session Storage sessionID:', session);

// Clear all Session Storage data
sessionStorage.clear();
          

This code demonstrates:

• How to store, retrieve, and remove data in Local Storage.
• How to store, retrieve, and clear data in Session Storage.
• The difference in data persistence between Local and Session Storage.
• Simple API usage for client-side storage without server interaction.

Local Storage: Stores data with no expiration time. Data persists even after the browser is closed and reopened. It is useful for saving user preferences or app state between sessions.

Session Storage: Stores data only for the duration of the page session. Data is cleared when the page session ends (e.g., tab or browser is closed). Suitable for temporary data needed during a browsing session.

Both use key-value pairs and store data as strings. They offer a synchronous API, making them easy to use but not suitable for large amounts of data or complex data structures without serialization.

• Persisting user preferences like theme, language, or layout settings.
• Storing temporary form data during a session to prevent data loss.
• Keeping session identifiers or tokens on the client side.
• Building offline-capable web apps by caching data locally.
• Enhancing user experience by reducing server calls for repeated data.