Wrapping It in an Angular Service\u00a0<\/strong><\/h2>\n\n\n\nIf you start sprinkling sessionStorage.setItem() calls across random components, it isgoing to get messy fast. Instead, create a storage service that acts as your single \u201cgatekeeper\u201d for setting and getting session data.<\/p>\n\n\n\n
Example: storage.service.ts<\/p>\n\n\n\n
import { Injectable } from ‘@angular\/core’;<\/p>\n\n\n\n
@Injectable({<\/p>\n\n\n\n
providedIn: ‘root’<\/p>\n\n\n\n
})<\/p>\n\n\n\n
export class StorageService {<\/p>\n\n\n\n
setSessionData(key: string, value: any): void {<\/p>\n\n\n\n
try {<\/p>\n\n\n\n
const jsonData = JSON.stringify(value);<\/p>\n\n\n\n
sessionStorage.setItem(key, jsonData);<\/p>\n\n\n\n
} catch (error) {<\/p>\n\n\n\n
console.error(‘Error saving to session storage’, error);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
getSessionData<T>(key: string): T | null {<\/p>\n\n\n\n
try {<\/p>\n\n\n\n
const data = sessionStorage.getItem(key);<\/p>\n\n\n\n
return data ? JSON.parse(data) as T : null;<\/p>\n\n\n\n
} catch (error) {<\/p>\n\n\n\n
console.error(‘Error reading from session storage’, error);<\/p>\n\n\n\n
return null;<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
removeSessionData(key: string): void {<\/p>\n\n\n\n
sessionStorage.removeItem(key);<\/p>\n\n\n\n
}<\/p>\n\n\n\n
clearSession(): void {<\/p>\n\n\n\n
sessionStorage.clear();<\/p>\n\n\n\n
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
Why bother with a service?<\/p>\n\n\n\n
Because once your app grows, you\u2019ll thank yourself for having all your session storage logic in one place especially if you decide later to switch to localStorage or an entirely different state management approach.<\/p>\n\n\n\n