As a web developer, I wondered why there are two storages in browsers a session and a local storage. On searching about it I got that the only difference is about how long the data stays. I said okayyy...! After that, I never bothered about this thing again.

While working with a huge client I found some challenges/errors which were solved when I transferred some data from session storage to local storage.

I thought to take a deeper dive into this thing! So here I am sharing the exact details that answer the question of why we have local and session storage.

Defination wise:

Local and session storage are both part of the Web Storage API, which allows websites to store data on the client side within the user's browser.

If you, my friend are a developer then this definition should be enough for you! (for the similarities, not the differences 😅)

Below are the indeed required details:

Persistence Duration

Local Storage: Data stored in local storage has no expiration time. It remains available even after the browser is closed and reopened, providing a way to persist data across sessions. This is useful for data that needs to be kept between visits to the website, such as user preferences, settings, or state information.

Session Storage: Data stored in session storage is only available for the duration of the page session. It is cleared when the page session ends, which typically happens when the browser tab or window is closed. This is ideal for temporary data that should only be available during a single session, such as form inputs or state information specific to that session.

Scope (That's where I was stuck)

Local Storage: Accessible by all tabs and windows that share the same origin (same protocol, host, and port). This means if a user opens multiple tabs on the same site, they can all access the same local storage data.

Session Storage: Isolated to the tab or window where it was created. Different tabs or windows do not share session storage, even if they are on the same site. This ensures that data is isolated per session, preventing potential conflicts or data leakage between tabs.

Use Cases

Local Storage: Storing user preferences and settings. Caching data can improve performance by avoiding repeated network requests.
Persisting user state or information across sessions.

Session Storage: Temporary storage for data during a single session, such as form data that hasn't been submitted yet. Information that should be cleared when the user closes the tab, like temporary state information that is session-specific.

Security Considerations

Local Storage: Since data persists indefinitely, it can be a target for attackers if sensitive information is stored without proper security measures. It is essential to avoid storing sensitive data like passwords or personal information in local storage.

Session Storage: Data has a shorter lifespan, reducing the risk window for potential exploitation. However, it still should not be used for highly sensitive information without proper security measures.

That's all!!

This is all the stuff that I could find out. If you have any other thing in mind which I missed just go to comments and mention about the same!

Stay happy, Keep hustling
Signing off Meet Bhalodiya,

Peace ✌️