Understanding localStorage vs. sessionStorage: Browser Storage API!!

I am writing this article because I got a bit confused about what to use for persisting Shopping Cart State while working on my School Project. I did some research and made some notes so sharing those as a blog here. My approach for this blog is quite simple. I have tried to break it down based on questions a Junior Developer has when learning a new concept.

What exactly do localStorage and sessionStorage mean??

• Both localStorage and sessionStorage are part of the Web Storage API, which is a set of mechanisms that allow browsers to store key-value pairs in a web browser.

• These storage options provide a way for web developers to store data on the client side, allowing information to persist across page loads and browser sessions without the need for server-side storage.

• The Web Storage API is widely supported in modern web browsers, making it a convenient tool for client-side data storage in web development.

Why do I need to know this??

• Responsibility for client-side data: As a developer, you often deal with client-side data storage to enhance user experience and optimize application performance

• User Experience and Preferences: Knowing when and how to use local storage or session storage enables you to implement features like remembering user preferences, themes, and customizations

• State Management: proper usage contributes to effective state management, which is essential for building responsive and dynamic web applications

Difference between Local Storage and Session Storage ??

• Local Storage:

  1. Persistent storage with no expiration

  2. Larget Storage Capacity (~5-10MB)

  3. Survives Browser restart

  4. Example: Authentication Token, preferences such as light mode/dark mode choice

• Session Storage:

  1. Temporary storage for a session

  2. cleared when the session ends(closing tab or browser)

  3. suitable for short-term data needs

  4. Example: data in any online form to be submitted

TradeOffs ??

• Local Storage:

  1. Pros: Persistent data, larger capacity

  2. Cons: Vulnerable to XSS attacks due to accessibility via JavaScirpt, limited by the same-origin policy.

• Session Storage:

  1. Pros: clears automatically after the session, better security compared to local storage

  2. cons: Limited lifespan, not suitable for long-term storage

When should I use each??

• Local Storage:

  1. Use when data needs to persist across sessions (e.g., user preferences, authentication tokens).

  2. Suitable for caching resources for improved performance.

• Session Storage:

  1. Use for temporary storage during a user's visit (e.g., form data, temporary state information). - Ideal for maintaining state within a single page.

Impact on Application Performance ??

• Loading Time:

  1. Both storage options are relatively fast, as they operate on the client side and don't involve server requests.

  2. Local storage might have a slight edge in performance due to its larger capacity, but the difference is usually negligible for smaller datasets.

• Security:

  1. Both local storage and session storage are accessible via JavaScript, making them vulnerable to XSS attacks.

  2. Avoid storing sensitive information without proper encryption and consider using HttpOnly cookies for critical data.

• Storage Capacity:

  1. Local storage provides more storage space, but be cautious not to exceed browser limits (usually around 5-10 MB).

  2. Session storage is limited to the current session, making it suitable for smaller datasets.

• Cross-Origin Considerations:

  1. Both local and session storage are subject to the same-origin policy, limiting access to data from different domains for security reasons.