🚀 Getting Started — 5 Minutes to Production

Get from zero to a fully functional storage system in 5 minutes. Session 166.3 added BackendSyncEngine and syncToBackend() for features that need both local persistence and backend sync.

Step 1: Setup (1 minute)

Basic Configuration

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideGgStorage } from '@storage-system';

export const appConfig: ApplicationConfig = {
  providers: [
    provideGgStorage({
      namespace: 'my-app',
      cache: { maxItems: 1000, ttlMs: 300000 }
    })
  ]
};

That's it! The system provides:

• ✅ Intelligent adapter selection (OPFS, Dexie, localStorage)
• ✅ Multi-level caching (0.3ms cache hits)
• ✅ Cross-tab synchronization
• ✅ Automatic performance optimization

Flash Persistence (auto-persistent signals)

Add provideFlashPersistence() for auto-persistent signals:

import { provideFlashPersistence } from '@storage-system';

providers: [
  provideGgStorage({ namespace: 'my-app' }),
  provideFlashPersistence({
    debounceMs: 300,
    preloadKeys: ['user-preferences', 'app-state']
  })
]

Backend Sync (Session 166.3)

For features that need both local IndexedDB and backend API:

import { provideBackendSyncTransport } from '@storage-system';

providers: [
  provideBackendSyncTransport(),
  // ... other providers
]

See BackendSyncEngine guide for full setup.

Step 2: Basic Usage (2 minutes)

Save and Load Data

import { Component, inject } from '@angular/core';
import { StorageService } from '@storage-system';

@Component({ selector: 'app-example', /* ... */ })
export class ExampleComponent {
  private storage = inject(StorageService);

  async saveData() {
    await this.storage.put('user-profile', {
      name: 'John Doe',
      email: '[email protected]',
      preferences: { theme: 'dark' }
    });
  }

  async loadData() {
    this.data = await this.storage.get('user-profile');
  }
}

Flash Persistence (Auto-Persistent Signals)

import { autoFlashState } from '@storage-system';

// ✨ Automatically persisted across sessions!
const userSettings = autoFlashState('user-settings', {
  theme: 'light',
  language: 'en'
});

// Just use it — persistence is automatic
userSettings.update(s => ({ ...s, theme: 'dark' }));

Backend Sync (Session 166.3)

import { autoFlashState, syncToBackend, BackendSyncEngine } from '@storage-system';

const prefs = autoFlashState('user-prefs', { theme: 'light' });
syncToBackend(prefs, { descriptorKey: 'user-prefs', debounceMs: 1000 });
// Instant local + durable backend with retry resilience

Step 3: Migration from localStorage / NGXS

From localStorage

// ❌ Before
const email = localStorage.getItem('LAST_EMAIL_KEY');

// ✅ After
const formState = autoFlashState('desktop-welcome-form', { email: '', phone: '' });
const email = formState().email;

From NGXS

// ❌ Before: Actions, reducers, manual persistence
@State({ name: 'preferences', defaults: { theme: 'dark' } })
export class PreferencesState { /* ... */ }

// ✅ After
const preferences = autoFlashState('preferences', { theme: 'dark' });
preferences.update(p => ({ ...p, theme: 'light' }));

Common Operations

Dev Mode: Smart Mock API

For API-first development, use HTTP + Mock API with intelligent storage:

utils.configureMockInterceptor({
  enabled: !environment.production,
  persistence: {
    storage: 'intelligent',
    namespace: 'your-app-api',
    ttl: 3600000
  }
}, mockDefinitions);

Zero refactoring when the real API launches.

Next Steps

• Overview — Architecture and features
• API Reference — Complete API
• BackendSyncEngine — Backend sync guide
• Common Mistakes — Anti-patterns

Session 166.3: BackendSyncEngine, syncToBackend(), two-signal pattern, retry queue.
Session 170: Documentation consolidation.