persist settings in browser storage

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - toggle playback with space bar
+- persist settings in browser storage
 
 ## [0.1.1] - 2023-03-31
 

src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, HostListener, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { IonContent } from '@ionic/angular';
 import { OpenSheetMusicDisplay } from 'opensheetmusicdisplay';
 
@@ -31,7 +31,12 @@ export class HomePageComponent implements OnInit {
     if (event.key == ' ') {
       if (this.running) this.osmdCursorStop();
       else this.osmdPractice();
-    } else alert(JSON.stringify(event));
+    }
+  }
+
+  @HostListener('window:beforeunload', ['$event'])
+  onUnload(): void {
+    this.settings.persist();
   }
 
   constructor(

src/app/services/settings.service.ts

@@ -21,13 +21,28 @@ export class SettingsService {
   speed: number = 100;
   backgroundColor: string = '#ffffff';
 
-  constructor(public translate: TranslateService) {
-    this.translate.use(this.language);
+  constructor(public _translate: TranslateService) {
+    this._translate.use(this.language);
+
+    // initialize values if they were previously persisted
+    for (let p in this) {
+      if (p.startsWith('_')) continue;
+      let store = localStorage.getItem(p);
+      if (store !== null) this[p] = JSON.parse(store);
+    }
+  }
+
+  // save properties to local storage
+  persist() {
+    for (let p in this) {
+      if (p.startsWith('_')) continue;
+      localStorage.setItem(p, JSON.stringify(this[p]));
+    }
   }
 
   useLanguage(event: any): void {
     this.language = event.detail.value;
-    this.translate.use(event.detail.value);
+    this._translate.use(event.detail.value);
   }
 
   updateZoom(value: number, osmd: OpenSheetMusicDisplay): void {