Introduction to Web Storage: Local Storage and Session Storage

Web storage refers to a mechanism that allows websites to store data in a user's browser. In modern web development, local storage and session storage are used to store data on the client side. These two types of storage offer different persistence levels and are widely used to store data that can be accessed across different sessions or tabs.

What is Local Storage?

Local Storage is a type of web storage that allows JavaScript to store data in the browser persistently. Data stored in local storage has no expiration time, which means it will remain even when the browser is closed and reopened or even OS reboot. This storage is limited to approximately 5MB - 10MB per domain. The data in local storage will only be destroyed if explicitly removed by the website (via `localStorage.removeItem()`, `localStorage.clear()`) or if the user manually clears the browser's local storage through browser settings.

All Methods of Local Storage

The `localStorage` API provides several methods to interact with the data:

• setItem(key, value) – Adds a key-value pair to local storage.
• getItem(key) – Retrieves the value associated with the given key.
• removeItem(key) – Removes the key-value pair from local storage.
• clear() – Clears all key-value pairs stored in local storage.
• key(index) – Returns the name of the key at the specified index.
• length – Returns the number of key-value pairs in local storage.

// Set data
localStorage.setItem("username", "prakash");

// Get data
let username = localStorage.getItem("username");
console.log(username); // prakash

// Remove data
localStorage.removeItem("username");

// Clear all data
localStorage.clear();

What is Session Storage?

Session Storage is similar to local storage, but the data stored in session storage is only available for the duration of the page session. A session starts when the page is loaded and ends when the page is closed. Data in session storage is limited to approximately 5MB per domain.

All Session Storage Methods

The `sessionStorage` API provides methods similar to `localStorage`:

• setItem(key, value) – Adds a key-value pair to session storage.
• getItem(key) – Retrieves the value associated with the given key.
• removeItem(key) – Removes the key-value pair from session storage.
• clear() – Clears all key-value pairs stored in session storage.
• key(index) – Returns the name of the key at the specified index.
• length – Returns the number of key-value pairs in session storage.

// Set data
sessionStorage.setItem("sessionData", "active");

// Get data
let sessionData = sessionStorage.getItem("sessionData");
console.log(sessionData); // active

// Remove data
sessionStorage.removeItem("sessionData");

// Clear all data
sessionStorage.clear();

Note : localStorage and sessionStorage is an object provided by the web browser's Web Storage API. It is a part of the window object in the browser and provides access to the local storage area of the browser.

Example

console.log(typeof localStorage) // object
console.log(typeof sessionStorage) // object

Real-Life Example of Both

- Local Storage Example: Imagine logging into a website, and the website stores your preferences (like theme, language, etc.) in local storage. Even if you close the browser, your preferences will be available when you come back to the site.

- Session Storage Example: When filling out a form on a website, session storage could be used to temporarily store your form data. This data is only available until you close the browser tab, ensuring that the data does not persist across sessions.

Difference

Difference between Local Storage and Session Storage :

Pros and Cons

• Pros:
• Data is persistent across browser sessions.
• Easy to use and access.
• Cons:
• Limited to 5MB-10MB approximately per domain.
• Not suitable for storing sensitive information as it's accessible via JavaScript.

• Pros:
• Data is temporary and limited to the current session.
• Useful for sensitive data that should not persist across sessions.
• Cons:
• Data is lost once the browser tab or window is closed.
• Not accessible across multiple tabs or windows.

Key Takeaways

Both local storage and session storage are essential tools for client-side storage. They are helpful in storing data that doesn't need to be fetched from a server repeatedly, improving performance. However, it's crucial to choose the right storage option based on your use case and security considerations.