Skip to main content
The StorageService provides a type-safe interface for browser storage operations with automatic namespacing using the store2 library.

​
Import

import { StorageService } from '@jet/services/storage/storage.service';
import { LocalStorageKey } from '@jet/enums/local-storage-key.enum';
import { SessionStorageKey } from '@jet/enums/session-storage-key.enum';

​
Usage

​
Local Storage Operations

import { inject } from '@angular/core';
import { StorageService } from '@jet/services/storage/storage.service';
import { LocalStorageKey } from '@jet/enums/local-storage-key.enum';

export class DataComponent {
  readonly #storageService = inject(StorageService);

  saveData() {
    const data = { theme: 'dark', fontSize: 14 };
    this.#storageService.setLocalStorageItem(LocalStorageKey.Settings, data);
  }

  loadData() {
    const data = this.#storageService.getLocalStorageItem<{ theme: string }>(LocalStorageKey.Settings);
    if (data) {
      console.log('Theme:', data.theme);
    }
  }

  removeData() {
    this.#storageService.removeLocalStorageItem(LocalStorageKey.Settings);
  }

  clearAll() {
    this.#storageService.clearLocalStorage();
  }
}

​
Session Storage Operations

saveTemporaryData() {
  this.#storageService.setSessionStorageItem(
    SessionStorageKey.TempData,
    { id: 123, timestamp: Date.now() }
  );
}

loadTemporaryData() {
  const data = this.#storageService.getSessionStorageItem<{ id: number }>(SessionStorageKey.TempData);
  return data;
}

removeTemporaryData() {
  this.#storageService.removeSessionStorageItem(SessionStorageKey.TempData);
}

clearAllSession() {
  this.#storageService.clearSessionStorage();
}

​
Type-Safe Storage

interface UserPreferences {
  notifications: boolean;
  language: string;
  theme: 'light' | 'dark';
}

savePreferences(prefs: UserPreferences) {
  this.#storageService.setLocalStorageItem<UserPreferences>(
    LocalStorageKey.Settings,
    prefs
  );
}

loadPreferences(): UserPreferences | null {
  return this.#storageService.getLocalStorageItem<UserPreferences>(
    LocalStorageKey.Settings
  );
}

​
Local Storage Methods

​
setLocalStorageItem

Stores a value in localStorage with type safety.
​
localStorageKey
LocalStorageKey
required
The enum key identifying the storage item
​
data
T
required
The data to store (automatically serialized to JSON)
​
return
void
This method does not return a value
Source: /home/daytona/workspace/source/src/app/services/storage/storage.service.ts:43 
public setLocalStorageItem<T>(localStorageKey: LocalStorageKey, data: T): void {
  this.#store2.set(localStorageKey, data);
}
Example: 
this.storageService.setLocalStorageItem(LocalStorageKey.Settings, {
  theme: 'dark',
  language: 'en'
});

​
getLocalStorageItem

Retrieves a value from localStorage with type safety.
​
localStorageKey
LocalStorageKey
required
The enum key identifying the storage item
​
return
T | null
The stored value cast to type T, or null if not found
Source: /home/daytona/workspace/source/src/app/services/storage/storage.service.ts:27 
public getLocalStorageItem<T>(localStorageKey: LocalStorageKey): null | T {
  return this.#store2.get(localStorageKey);
}
Example: 
interface Settings {
  theme: string;
  language: string;
}

const settings = this.storageService.getLocalStorageItem<Settings>(LocalStorageKey.Settings);
if (settings) {
  console.log('Theme:', settings.theme);
}

​
removeLocalStorageItem

Removes a specific item from localStorage.
​
localStorageKey
LocalStorageKey
required
The enum key identifying the storage item to remove
​
return
void
This method does not return a value
Source: /home/daytona/workspace/source/src/app/services/storage/storage.service.ts:35 
public removeLocalStorageItem(localStorageKey: LocalStorageKey): void {
  this.#store2.remove(localStorageKey);
}
Example: 
this.storageService.removeLocalStorageItem(LocalStorageKey.Settings);

​
clearLocalStorage

Clears all items from localStorage (including non-namespaced items).
​
return
void
This method does not return a value
Source: /home/daytona/workspace/source/src/app/services/storage/storage.service.ts:19 
public clearLocalStorage(): void {
  store2.clearAll();
}
Example: 
// Clear all storage on logout
this.storageService.clearLocalStorage();
This method clears ALL localStorage, not just namespaced items. Use with caution.

​
Session Storage Methods

​
setSessionStorageItem

Stores a value in sessionStorage with type safety.
​
sessionStorageKey
SessionStorageKey
required
The enum key identifying the storage item
​
data
T
required
The data to store (automatically serialized to JSON)
​
return
void
This method does not return a value
Source: /home/daytona/workspace/source/src/app/services/storage/storage.service.ts:47 
public setSessionStorageItem<T>(sessionStorageKey: SessionStorageKey, data: T): void {
  this.#store2.session.set(sessionStorageKey, data);
}
Example: 
this.storageService.setSessionStorageItem(SessionStorageKey.FormData, {
  step: 2,
  values: { name: 'John' }
});

​
getSessionStorageItem

Retrieves a value from sessionStorage with type safety.
​
sessionStorageKey
SessionStorageKey
required
The enum key identifying the storage item
​
return
T | null
The stored value cast to type T, or null if not found
Source: /home/daytona/workspace/source/src/app/services/storage/storage.service.ts:31 
public getSessionStorageItem<T>(sessionStorageKey: SessionStorageKey): null | T {
  return this.#store2.session.get(sessionStorageKey);
}
Example: 
interface FormData {
  step: number;
  values: Record<string, any>;
}

const formData = this.storageService.getSessionStorageItem<FormData>(SessionStorageKey.FormData);
if (formData) {
  console.log('Current step:', formData.step);
}

​
removeSessionStorageItem

Removes a specific item from sessionStorage.
​
sessionStorageKey
SessionStorageKey
required
The enum key identifying the storage item to remove
​
return
void
This method does not return a value
Source: /home/daytona/workspace/source/src/app/services/storage/storage.service.ts:39 
public removeSessionStorageItem(sessionStorageKey: SessionStorageKey): void {
  this.#store2.session.remove(sessionStorageKey);
}
Example: 
this.storageService.removeSessionStorageItem(SessionStorageKey.FormData);

​
clearSessionStorage

Clears all items from sessionStorage.
​
return
void
This method does not return a value
Source: /home/daytona/workspace/source/src/app/services/storage/storage.service.ts:23 
public clearSessionStorage(): void {
  store2.session.clearAll();
}
Example: 
// Clear session data on navigation
this.storageService.clearSessionStorage();

​
Type Definitions

​
LocalStorageKey Enum

export enum LocalStorageKey {
  LastUpdateCheckTimestamp = 'lastUpdateCheckTimestamp',
  Settings = 'settings',
}
Source: /home/daytona/workspace/source/src/app/enums/local-storage-key.enum.ts:1

​
SessionStorageKey Enum

export enum SessionStorageKey {}
Source: /home/daytona/workspace/source/src/app/enums/session-storage-key.enum.ts:1
Add your own session storage keys to this enum as needed.

​
Features

​
Namespace Isolation

All storage operations are automatically namespaced with ‘jet’: 
this.#store2 = store2.namespace('jet');
This prevents conflicts with other applications on the same domain.

​
Automatic Serialization

The store2 library automatically handles JSON serialization/deserialization: 
// Objects are automatically stringified
this.storageService.setLocalStorageItem(LocalStorageKey.Settings, {
  complex: { nested: { data: true } }
});

// And automatically parsed on retrieval
const data = this.storageService.getLocalStorageItem(LocalStorageKey.Settings);
// data is already an object, not a string

​
Type Safety

Generic type parameters ensure compile-time type checking: 
interface UserData {
  id: number;
  name: string;
}

// Type-safe write
this.storageService.setLocalStorageItem<UserData>(
  LocalStorageKey.User,
  { id: 1, name: 'John' }
);

// Type-safe read
const user = this.storageService.getLocalStorageItem<UserData>(LocalStorageKey.User);
if (user) {
  console.log(user.name); // TypeScript knows this is a string
}

​
Cross-Browser Compatibility

The store2 library handles browser inconsistencies and provides fallbacks for older browsers.

​
Best Practices

  1. Use enums for keys - Always use LocalStorageKey or SessionStorageKey enums
  2. Type your data - Provide generic type parameters for type safety
  3. Handle null returns - Always check if getItem returns null
  4. Use session storage for temporary data - Use sessionStorage for data that shouldn’t persist
  5. Clear on logout - Call clearLocalStorage() when users sign out
  6. Avoid storing sensitive data - Never store passwords or tokens in localStorage

​
Common Patterns

​
Persistent User Preferences

export class PreferencesService {
  readonly #storageService = inject(StorageService);

  savePreferences(prefs: UserPreferences) {
    this.#storageService.setLocalStorageItem(LocalStorageKey.Settings, prefs);
  }

  loadPreferences(): UserPreferences {
    const stored = this.#storageService.getLocalStorageItem<UserPreferences>(
      LocalStorageKey.Settings
    );
    return stored ?? DEFAULT_PREFERENCES;
  }
}

​
Form Draft Saving

export class FormComponent implements OnDestroy {
  readonly #storageService = inject(StorageService);

  saveDraft() {
    this.#storageService.setSessionStorageItem(
      SessionStorageKey.FormDraft,
      this.form.value
    );
  }

  loadDraft() {
    const draft = this.#storageService.getSessionStorageItem(SessionStorageKey.FormDraft);
    if (draft) {
      this.form.patchValue(draft);
    }
  }

  ngOnDestroy() {
    this.#storageService.removeSessionStorageItem(SessionStorageKey.FormDraft);
  }
}

​
Cache with Expiration

interface CachedData<T> {
  value: T;
  timestamp: number;
}

export class CacheService {
  readonly #storageService = inject(StorageService);
  readonly #cacheExpiration = 60 * 60 * 1000; // 1 hour

  set<T>(key: LocalStorageKey, value: T) {
    const cached: CachedData<T> = {
      value,
      timestamp: Date.now()
    };
    this.#storageService.setLocalStorageItem(key, cached);
  }

  get<T>(key: LocalStorageKey): T | null {
    const cached = this.#storageService.getLocalStorageItem<CachedData<T>>(key);
    
    if (!cached) return null;
    
    const isExpired = Date.now() - cached.timestamp > this.#cacheExpiration;
    if (isExpired) {
      this.#storageService.removeLocalStorageItem(key);
      return null;
    }
    
    return cached.value;
  }
}

​
Dependencies

The StorageService depends on:
  • store2 - Cross-browser storage library with namespace support
  • LoggerService - For service initialization logging

Build docs developers (and LLMs) love

Get started for freeTalk to us