Session storage vs local storage angular

In Angular, both sessionStorage and localStorage are web storage APIs to store data in the browser.

They will be differ in terms  of scope, persistence, and usage.

1. Session Storage

Scope:
Data stored in sessionStorage is limited to the current browser tab or window. When the tab or window is closed, all stored data will be removed.

Persistence:
Data persists only as long as the session is active. It remains available when the page is refreshed but disappears when a new tab or window is opened.

Use Case:
Useful for storing temporary data that is needed only within a single session, such as form inputs or user preferences.

Example:

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Retrieve data from sessionStorage
const data = sessionStorage.getItem('key');

// Remove data from sessionStorage
sessionStorage.removeItem('key');

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

2. Local Storage

Scope:
Data stored in localStorage is accessible from any tab or window of the same origin (protocol + domain + port).

Persistence:
Data remains stored even after the browser is closed and reopened unless explicitly cleared by the user or application.

Use Case:
Ideal for storing data that needs to persist across sessions, such as authentication tokens and user settings.

Example:

// Save data to localStorage
localStorage.setItem('key', 'value');

// Retrieve data from localStorage
const data = localStorage.getItem('key');

// Remove data from localStorage
localStorage.removeItem('key');

// Clear all localStorage data
localStorage.clear();

Key Differences

Angular-Specific Considerations

Encapsulation

Encapsulating sessionStorage and localStorage interactions within Angular services makes code more modular and maintainable.

Security

Avoid storing sensitive data (e.g., passwords, authentication tokens) in either sessionStorage or localStorage without encryption. This is because JavaScript has direct access to these storage mechanisms.

Reactive Updates

To handle updates based on storage changes, Angular's EventEmitter or RxJS Subject can be used to notify components.x

example Service for Storage

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class StorageService {
  constructor() {}

  // Session Storage Methods
  setSessionData(key: string, value: string): void {
    sessionStorage.setItem(key, value);
  }

  getSessionData(key: string): string | null {
    return sessionStorage.getItem(key);
  }

  removeSessionData(key: string): void {
    sessionStorage.removeItem(key);
  }

  clearSessionStorage(): void {
    sessionStorage.clear();
  }

  // Local Storage Methods
  setLocalData(key: string, value: string): void {
    localStorage.setItem(key, value);
  }

  getLocalData(key: string): string | null {
    return localStorage.getItem(key);
  }

  removeLocalData(key: string): void {
    localStorage.removeItem(key);
  }

  clearLocalStorage(): void {
    localStorage.clear();
  }
}

When to Use Which?

Use sessionStorage for:

• Data that should be lost when the session ends.
• Storing information for a single tab or window.

Use localStorage for:

• Data that needs to persist across browser sessions.
• Storing data that should be accessible across multiple tabs/windows.

Understanding these differences will help you choose the appropriate storage mechanism for your Angular application.