feat: remove ionic storage (#1839)

* feat: remove ionic storage

* grayscal when disconncted, rename local storage service for clarity

* remove storage from package lock

* update patchDB

Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>

frontend/package-lock.json

@@ -17,7 +17,6 @@
         "@angular/platform-browser-dynamic": "^14.1.0",
         "@angular/router": "^14.1.0",
         "@ionic/angular": "^6.1.15",
-        "@ionic/storage-angular": "^3.0.6",
         "@materia-ui/ngx-monaco-editor": "^6.0.0",
         "@start9labs/argon2": "^0.1.0",
         "@start9labs/emver": "^0.1.5",
@@ -3007,32 +3006,6 @@
         "tslib": "^2.1.0"
       }
     },
-    "node_modules/@ionic/storage": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@ionic/storage/-/storage-3.0.6.tgz",
-      "integrity": "sha512-sw+zSJINIpbQCGZR9mEtb9N0WmZLuhcMVqOZJBqLuDACAMdXqG39zmp5nSVqhGI1/9X3nd0K5gVn6icyVfUnUg==",
-      "dependencies": {
-        "localforage": "^1.9.0"
-      }
-    },
-    "node_modules/@ionic/storage-angular": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@ionic/storage-angular/-/storage-angular-3.0.6.tgz",
-      "integrity": "sha512-ZXlIFWGU27aCxVFgZb0KFJFtWwnn6+HK6v0rMGzjN8f7oV2ewXaQ2dl1gTw/A8YoozTVPOFxwfFHCjhWLFR1Fw==",
-      "dependencies": {
-        "@ionic/storage": "^3.0.4",
-        "tslib": "^1.10.0"
-      },
-      "peerDependencies": {
-        "@angular/core": "*",
-        "rxjs": "*"
-      }
-    },
-    "node_modules/@ionic/storage-angular/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
     "node_modules/@ionic/utils-array": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.5.tgz",
@@ -7941,11 +7914,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
-    },
     "node_modules/immutable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -8709,14 +8677,6 @@
         }
       }
     },
-    "node_modules/lie": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
-      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
-      "dependencies": {
-        "immediate": "~3.0.5"
-      }
-    },
     "node_modules/lilconfig": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
@@ -8883,14 +8843,6 @@
         "node": ">= 12.13.0"
       }
     },
-    "node_modules/localforage": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
-      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
-      "dependencies": {
-        "lie": "3.1.1"
-      }
-    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -16712,30 +16664,6 @@
         "tslib": "^2.1.0"
       }
     },
-    "@ionic/storage": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@ionic/storage/-/storage-3.0.6.tgz",
-      "integrity": "sha512-sw+zSJINIpbQCGZR9mEtb9N0WmZLuhcMVqOZJBqLuDACAMdXqG39zmp5nSVqhGI1/9X3nd0K5gVn6icyVfUnUg==",
-      "requires": {
-        "localforage": "^1.9.0"
-      }
-    },
-    "@ionic/storage-angular": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@ionic/storage-angular/-/storage-angular-3.0.6.tgz",
-      "integrity": "sha512-ZXlIFWGU27aCxVFgZb0KFJFtWwnn6+HK6v0rMGzjN8f7oV2ewXaQ2dl1gTw/A8YoozTVPOFxwfFHCjhWLFR1Fw==",
-      "requires": {
-        "@ionic/storage": "^3.0.4",
-        "tslib": "^1.10.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
     "@ionic/utils-array": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.5.tgz",
@@ -20403,11 +20331,6 @@
       "dev": true,
       "optional": true
     },
-    "immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
-    },
     "immutable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -20978,14 +20901,6 @@
         "webpack-sources": "^3.0.0"
       }
     },
-    "lie": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
-      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
-      "requires": {
-        "immediate": "~3.0.5"
-      }
-    },
     "lilconfig": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.5.tgz",
@@ -21103,14 +21018,6 @@
       "integrity": "sha512-HVl9ZqccQihZ7JM85dco1MvO9G+ONvxoGa9rkhzFsneGLKSUg1gJf9bWzhRhcvm2qChhWpebQhP44qxjKIUCaQ==",
       "dev": true
     },
-    "localforage": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
-      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
-      "requires": {
-        "lie": "3.1.1"
-      }
-    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",

frontend/package.json

@@ -31,7 +31,6 @@
     "@angular/platform-browser-dynamic": "^14.1.0",
     "@angular/router": "^14.1.0",
     "@ionic/angular": "^6.1.15",
-    "@ionic/storage-angular": "^3.0.6",
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@start9labs/argon2": "^0.1.0",
     "@start9labs/emver": "^0.1.5",

frontend/projects/ui/src/app/app.component.html

@@ -10,7 +10,11 @@
           <app-menu *ngIf="authService.isVerified$ | async"></app-menu>
         </ion-content>
       </ion-menu>
-      <ion-router-outlet id="main-content"></ion-router-outlet>
+      <ion-router-outlet
+        id="main-content"
+        class="container"
+        [class.container_offline]="!(connection.connected$ | async)"
+      ></ion-router-outlet>
     </ion-split-pane>
 
     <section appPreloader></section>

frontend/projects/ui/src/app/app.component.scss

@@ -5,3 +5,11 @@
 ion-split-pane {
   --side-max-width: 280px;
 }
+
+.container {
+  transition: filter 0.3s;
+
+  &_offline {
+    filter: saturate(0) contrast(0.85);
+  }
+}

frontend/projects/ui/src/app/app.component.ts

@@ -4,6 +4,7 @@ import { AuthService } from './services/auth.service'
 import { SplitPaneTracker } from './services/split-pane.service'
 import { PatchDataService } from './services/patch-data.service'
 import { PatchMonitorService } from './services/patch-monitor.service'
+import { ConnectionService } from './services/connection.service'
 
 @Component({
   selector: 'app-root',
@@ -19,6 +20,7 @@ export class AppComponent implements OnDestroy {
     private readonly patchMonitor: PatchMonitorService,
     private readonly splitPane: SplitPaneTracker,
     readonly authService: AuthService,
+    readonly connection: ConnectionService,
   ) {}
 
   splitPaneVisible({ detail }: any) {

frontend/projects/ui/src/app/app.module.ts

@@ -2,8 +2,6 @@ import { HttpClientModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { IonicModule } from '@ionic/angular'
-import { Drivers } from '@ionic/storage'
-import { IonicStorageModule } from '@ionic/storage-angular'
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'
 import { MarkdownModule, SharedPipesModule } from '@start9labs/shared'
 
@@ -30,12 +28,6 @@ import { ConnectionBarComponentModule } from './components/connection-bar/connec
       mode: 'md',
     }),
     AppRoutingModule,
-    IonicStorageModule.forRoot({
-      storeName: '_embassykv',
-      dbKey: '_embassykey',
-      name: '_embassystorage',
-      driverOrder: [Drivers.LocalStorage],
-    }),
     MenuModule,
     PreloaderModule,
     FooterModule,

frontend/projects/ui/src/app/app.providers.ts

@@ -2,13 +2,12 @@ import { APP_INITIALIZER, Provider } from '@angular/core'
 import { UntypedFormBuilder } from '@angular/forms'
 import { Router, RouteReuseStrategy } from '@angular/router'
 import { IonicRouteStrategy, IonNav } from '@ionic/angular'
-import { Storage } from '@ionic/storage-angular'
 import { WorkspaceConfig } from '@start9labs/shared'
 import { ApiService } from './services/api/embassy-api.service'
 import { MockApiService } from './services/api/embassy-mock-api.service'
 import { LiveApiService } from './services/api/embassy-live-api.service'
 import { AuthService } from './services/auth.service'
-import { LocalStorageService } from './services/local-storage.service'
+import { ClientStorageService } from './services/client-storage.service'
 import { FilterPackagesPipe } from '../../../marketplace/src/pipes/filter-packages.pipe'
 
 const { useMocks } = require('../../../../config.json') as WorkspaceConfig
@@ -27,23 +26,20 @@ export const APP_PROVIDERS: Provider[] = [
   },
   {
     provide: APP_INITIALIZER,
-    deps: [Storage, AuthService, LocalStorageService, Router],
+    deps: [AuthService, ClientStorageService, Router],
     useFactory: appInitializer,
     multi: true,
   },
 ]
 
 export function appInitializer(
-  storage: Storage,
   auth: AuthService,
-  localStorage: LocalStorageService,
+  localStorage: ClientStorageService,
   router: Router,
-): () => Promise<void> {
-  return async () => {
-    await storage.create()
-    await auth.init()
-    await localStorage.init()
-
+): () => void {
+  return () => {
+    auth.init()
+    localStorage.init()
     router.initialNavigation()
   }
 }

frontend/projects/ui/src/app/pages/login/login.page.ts

@@ -46,9 +46,8 @@ export class LoginPage {
       })
 
       this.password = ''
-      this.authService
-        .setVerified()
-        .then(() => this.router.navigate([''], { replaceUrl: true }))
+      this.authService.setVerified()
+      this.router.navigate([''], { replaceUrl: true })
     } catch (e: any) {
       // code 7 is for incorrect password
       this.error = e.code === 7 ? 'Invalid Password' : e.message

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-controls/marketplace-show-controls.component.ts

@@ -15,7 +15,7 @@ import {
   PackageDataEntry,
   PackageState,
 } from 'src/app/services/patch-db/data-model'
-import { LocalStorageService } from 'src/app/services/local-storage.service'
+import { ClientStorageService } from 'src/app/services/client-storage.service'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { hasCurrentDeps } from 'src/app/util/has-deps'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
@@ -37,13 +37,13 @@ export class MarketplaceShowControlsComponent {
   @Input()
   localPkg!: PackageDataEntry | null
 
-  readonly showDevTools$ = this.localStorageService.showDevTools$
+  readonly showDevTools$ = this.ClientStorageService.showDevTools$
 
   readonly PackageState = PackageState
 
   constructor(
     private readonly alertCtrl: AlertController,
-    private readonly localStorageService: LocalStorageService,
+    private readonly ClientStorageService: ClientStorageService,
     @Inject(AbstractMarketplaceService)
     private readonly marketplaceService: MarketplaceService,
     private readonly loadingCtrl: LoadingController,

frontend/projects/ui/src/app/pages/server-routes/preferences/preferences.page.ts

@@ -11,7 +11,7 @@ import {
 } from 'src/app/modals/generic-input/generic-input.component'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ServerConfigService } from 'src/app/services/server-config.service'
-import { LocalStorageService } from '../../../services/local-storage.service'
+import { ClientStorageService } from '../../../services/client-storage.service'
 import {
   ServerNameInfo,
   ServerNameService,
@@ -36,7 +36,7 @@ export class PreferencesPage {
     private readonly modalCtrl: ModalController,
     private readonly api: ApiService,
     private readonly toastCtrl: ToastController,
-    private readonly localStorageService: LocalStorageService,
+    private readonly ClientStorageService: ClientStorageService,
     private readonly patch: PatchDB<DataModel>,
     private readonly serverNameService: ServerNameService,
     readonly serverConfig: ServerConfigService,
@@ -83,7 +83,7 @@ export class PreferencesPage {
     this.clicks++
     if (this.clicks >= 5) {
       this.clicks = 0
-      const newVal = await this.localStorageService.toggleShowDevTools()
+      const newVal = this.ClientStorageService.toggleShowDevTools()
       const toast = await this.toastCtrl.create({
         header: newVal ? 'Dev tools unlocked' : 'Dev tools hidden',
         position: 'bottom',

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts

@@ -12,7 +12,7 @@ import { ServerNameService } from 'src/app/services/server-name.service'
 import { Observable, of } from 'rxjs'
 import { ErrorToastService } from '@start9labs/shared'
 import { EOSService } from 'src/app/services/eos.service'
-import { LocalStorageService } from 'src/app/services/local-storage.service'
+import { ClientStorageService } from 'src/app/services/client-storage.service'
 import { OSUpdatePage } from 'src/app/modals/os-update/os-update.page'
 import { getAllPackages } from '../../../util/get-package-data'
 import { AuthService } from 'src/app/services/auth.service'
@@ -29,7 +29,7 @@ export class ServerShowPage {
   readonly server$ = this.patch.watch$('server-info')
   readonly name$ = this.serverNameService.name$
   readonly showUpdate$ = this.eosService.showUpdate$
-  readonly showDiskRepair$ = this.localStorageService.showDiskRepair$
+  readonly showDiskRepair$ = this.ClientStorageService.showDiskRepair$
 
   constructor(
     private readonly alertCtrl: AlertController,
@@ -41,7 +41,7 @@ export class ServerShowPage {
     private readonly route: ActivatedRoute,
     private readonly patch: PatchDB<DataModel>,
     private readonly eosService: EOSService,
-    private readonly localStorageService: LocalStorageService,
+    private readonly ClientStorageService: ClientStorageService,
     private readonly serverNameService: ServerNameService,
     private readonly authService: AuthService,
   ) {}
@@ -511,11 +511,11 @@ export class ServerShowPage {
     return 0
   }
 
-  async addClick() {
+  addClick() {
     this.clicks++
     if (this.clicks >= 5) {
       this.clicks = 0
-      await this.localStorageService.toggleShowDiskRepair()
+      this.ClientStorageService.toggleShowDiskRepair()
     }
     setTimeout(() => {
       this.clicks = Math.max(this.clicks - 1, 0)

frontend/projects/ui/src/app/services/api/embassy-mock-api.service.ts

@@ -946,7 +946,7 @@ export class MockApiService extends ApiService {
 
   private async mockRevision<T>(patch: Operation<T>[]): Promise<void> {
     if (!this.sequence) {
-      const { sequence } = await this.bootstrapper.init()
+      const { sequence } = this.bootstrapper.init()
       this.sequence = sequence
     }
     const revision = {
@@ -961,7 +961,7 @@ export class MockApiService extends ApiService {
     response: T | null = null,
   ): Promise<T> {
     if (!this.sequence) {
-      const { sequence } = await this.bootstrapper.init()
+      const { sequence } = this.bootstrapper.init()
       this.sequence = sequence
     }
 

frontend/projects/ui/src/app/services/auth.service.ts

@@ -1,8 +1,8 @@
 import { Injectable, NgZone } from '@angular/core'
 import { ReplaySubject } from 'rxjs'
 import { distinctUntilChanged, map } from 'rxjs/operators'
-import { Storage } from '@ionic/storage-angular'
 import { Router } from '@angular/router'
+import { StorageService } from './storage.service'
 
 export enum AuthState {
   UNVERIFIED,
@@ -21,13 +21,13 @@ export class AuthService {
   )
 
   constructor(
-    private readonly storage: Storage,
+    private readonly storage: StorageService,
     private readonly zone: NgZone,
     private readonly router: Router,
   ) {}
 
-  async init(): Promise<void> {
-    const loggedIn = await this.storage.get(this.LOGGED_IN_KEY)
+  init(): void {
+    const loggedIn = this.storage.get(this.LOGGED_IN_KEY)
     if (loggedIn) {
       this.setVerified()
     } else {
@@ -35,8 +35,8 @@ export class AuthService {
     }
   }
 
-  async setVerified(): Promise<void> {
-    await this.storage.set(this.LOGGED_IN_KEY, true)
+  setVerified(): void {
+    this.storage.set(this.LOGGED_IN_KEY, true)
     this.authState$.next(AuthState.VERIFIED)
   }
 

frontend/projects/ui/src/app/services/client-storage.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core'
+import { BehaviorSubject } from 'rxjs'
+import { StorageService } from './storage.service'
+const SHOW_DEV_TOOLS = 'SHOW_DEV_TOOLS'
+const SHOW_DISK_REPAIR = 'SHOW_DISK_REPAIR'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ClientStorageService {
+  readonly showDevTools$ = new BehaviorSubject<boolean>(false)
+  readonly showDiskRepair$ = new BehaviorSubject<boolean>(false)
+
+  constructor(private readonly storage: StorageService) {}
+
+  init() {
+    this.showDevTools$.next(!!this.storage.get(SHOW_DEV_TOOLS))
+    this.showDiskRepair$.next(!!this.storage.get(SHOW_DISK_REPAIR))
+  }
+
+  toggleShowDevTools(): boolean {
+    const newVal = !this.storage.get(SHOW_DEV_TOOLS)
+    this.storage.set(SHOW_DEV_TOOLS, newVal)
+    this.showDevTools$.next(newVal)
+    return newVal
+  }
+
+  toggleShowDiskRepair(): boolean {
+    const newVal = !this.storage.get(SHOW_DISK_REPAIR)
+    this.storage.set(SHOW_DISK_REPAIR, newVal)
+    this.showDiskRepair$.next(newVal)
+    return newVal
+  }
+}

frontend/projects/ui/src/app/services/local-storage.service.ts

@@ -1,36 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Storage } from '@ionic/storage-angular'
-import { BehaviorSubject } from 'rxjs'
-const SHOW_DEV_TOOLS = 'SHOW_DEV_TOOLS'
-const SHOW_DISK_REPAIR = 'SHOW_DISK_REPAIR'
-
-@Injectable({
-  providedIn: 'root',
-})
-export class LocalStorageService {
-  readonly showDevTools$ = new BehaviorSubject<boolean>(false)
-  readonly showDiskRepair$ = new BehaviorSubject<boolean>(false)
-
-  constructor(private readonly storage: Storage) {}
-
-  async init() {
-    const devTools = await this.storage.get(SHOW_DEV_TOOLS)
-    this.showDevTools$.next(!!devTools)
-    const diskRepair = await this.storage.get(SHOW_DISK_REPAIR)
-    this.showDiskRepair$.next(!!diskRepair)
-  }
-
-  async toggleShowDevTools(): Promise<boolean> {
-    const newVal = !(await this.storage.get(SHOW_DEV_TOOLS))
-    await this.storage.set(SHOW_DEV_TOOLS, newVal)
-    this.showDevTools$.next(newVal)
-    return newVal
-  }
-
-  async toggleShowDiskRepair(): Promise<boolean> {
-    const newVal = !(await this.storage.get(SHOW_DISK_REPAIR))
-    await this.storage.set(SHOW_DISK_REPAIR, newVal)
-    this.showDiskRepair$.next(newVal)
-    return newVal
-  }
-}

frontend/projects/ui/src/app/services/patch-db/local-storage-bootstrap.ts

@@ -1,7 +1,7 @@
 import { Bootstrapper, DBCache } from 'patch-db-client'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { Injectable } from '@angular/core'
-import { Storage } from '@ionic/storage-angular'
+import { StorageService } from '../storage.service'
 
 @Injectable({
   providedIn: 'root',
@@ -9,16 +9,17 @@ import { Storage } from '@ionic/storage-angular'
 export class LocalStorageBootstrap implements Bootstrapper<DataModel> {
   static CONTENT_KEY = 'patch-db-cache'
 
-  constructor(private readonly storage: Storage) {}
+  constructor(private readonly storage: StorageService) {}
 
-  async init(): Promise<DBCache<DataModel>> {
-    const cache: DBCache<DataModel> = await this.storage.get(
+  init(): DBCache<DataModel> {
+    const cache = this.storage.get<DBCache<DataModel>>(
       LocalStorageBootstrap.CONTENT_KEY,
     )
+
     return cache || { sequence: 0, data: {} as DataModel }
   }
 
-  async update(cache: DBCache<DataModel>): Promise<void> {
-    await this.storage.set(LocalStorageBootstrap.CONTENT_KEY, cache)
+  update(cache: DBCache<DataModel>): void {
+    this.storage.set(LocalStorageBootstrap.CONTENT_KEY, cache)
   }
 }

frontend/projects/ui/src/app/services/storage.service.ts

@@ -0,0 +1,30 @@
+import { Inject, Injectable } from '@angular/core'
+import { DOCUMENT } from '@angular/common'
+
+const PREFIX = '_embassystorage/_embassykv/'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StorageService {
+  private readonly storage = this.document.defaultView!.localStorage
+
+  constructor(@Inject(DOCUMENT) private readonly document: Document) {}
+
+  get<T>(key: string): T {
+    return JSON.parse(String(this.storage.getItem(`${PREFIX}${key}`)))
+  }
+
+  set<T>(key: string, value: T) {
+    this.storage.setItem(`${PREFIX}${key}`, JSON.stringify(value))
+  }
+
+  clear() {
+    Array.from(
+      { length: this.storage.length },
+      (_, i) => this.storage.key(i) || '',
+    )
+      .filter(key => key.startsWith(PREFIX))
+      .forEach(key => this.storage.removeItem(key))
+  }
+}