When building modern web apps, especially with Angular, you’ll often need to store data on the client side. Whether it’s keeping a user logged in, saving theme preferences, or caching data to avoid unnecessary API calls — that’s where Local Storage and Session Storage come into play.
Let’s break them down, explore when to use which, and look at how to manage both efficiently in Angular.
🧠 What’s the Difference?
Both localStorage and sessionStorage come from the Web Storage API. They’re similar in syntax and usage but differ in how long they keep your data and where that data is available.
1. 🔒 Local Storage — Persistent by Nature
Local Storage is your go-to option when you want data to stick around — even after the browser is closed.
✅ Key Characteristics:
- Data stays until explicitly removed
- Around ~5MB limit per origin (enough for most use cases)
- Accessible across all tabs and windows for the same origin
- Ideal for non-sensitive, persistent data
📦 Typical Use Cases:
- Dark/light mode preference
- Remembering language or UI settings
- Keeping auth tokens (note: use with caution for sensitive info)
- Caching static data (like dropdown options)
// Save a value
localStorage.setItem('theme', 'dark');
// Get it later
const theme = localStorage.getItem('theme');
// Remove it
localStorage.removeItem('theme');
2. 🕒 Session Storage — Temporary but Handy
Session Storage is designed for short-term memory. Once the tab or browser is closed, the data is gone.
✅ Key Characteristics:
- Same ~5MB limit
- Only available to the tab where it was set
- Automatically clears when the session ends
- Slightly more secure for one-time flows
📦 Typical Use Cases:
- Temporarily saving form inputs
- UI state while user navigates within a session
- One-time passcodes or session-only flags
// Set data for this session
sessionStorage.setItem('formState', 'step2');
// Retrieve it
const formState = sessionStorage.getItem('formState');
// Clear it
sessionStorage.removeItem('formState');
🤹 Angular-Friendly: Building a StorageService
To avoid repetitive code (and keep things tidy), you can wrap your storage logic in an Angular service.
✅ storage.service.ts
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class StorageService {
// Local Storage
setLocal(key: string, value: string): void {
localStorage.setItem(key, value);
}
getLocal(key: string): string | null {
return localStorage.getItem(key);
}
removeLocal(key: string): void {
localStorage.removeItem(key);
}
// Session Storage
setSession(key: string, value: string): void {
sessionStorage.setItem(key, value);
}
getSession(key: string): string | null {
return sessionStorage.getItem(key);
}
removeSession(key: string): void {
sessionStorage.removeItem(key);
}
}
💡 How to Use It:
constructor(private storage: StorageService) {}
ngOnInit() {
this.storage.setLocal('theme', 'dark');
const theme = this.storage.getLocal('theme');
console.log(theme); // 'dark'
}
🆚 Local vs Session — Quick Decision Table
| Feature | Local Storage | Session Storage |
|---|---|---|
| Data lifespan | Until manually removed | Until tab/browser closes |
| Scope | All tabs/windows | Current tab only |
| Use for login persistence? | Yes (with caution) | Only if temporary |
| Form state or wizard steps? | ❌ | ✅ |
🧾 Final Thoughts
Both storage types are useful — it just depends on your use case:
- Need to remember the user’s settings or login? Go with Local Storage.
- Just need temporary state while the user fills a form? Use Session Storage.
And if you’re working in Angular, wrapping both in a simple service like the one above can save you time and help keep things DRY.
