keep settings in storage

src/app.config.mjs

@@ -13,3 +13,7 @@ for (let i = 0; i < 42; ++i) {
 }
 
 `;
+
+// storage unique keys:
+export const STORAGE_KEY_CODE = 'code';
+export const STORAGE_KEY_SETTINGS = 'settings';

src/services/settingsService.mjs

@@ -0,0 +1,41 @@
+
+import EventEmitter from 'eventemitter3';
+import { STORAGE_KEY_SETTINGS } from '../app.config';
+
+// const ee = new EventEmitter();
+let data;
+
+const init = () => {
+  try {
+    data = JSON.parse(localStorage.getItem(STORAGE_KEY_SETTINGS) ?? '{}');
+  } catch(e) {
+    data = {};
+  }
+};
+
+const save = () => {
+  const str = JSON.stringify(data);
+  localStorage.setItem(STORAGE_KEY_SETTINGS, str);
+};
+
+const settingsService = {
+  getItem(item) {
+    return data[item];
+  },
+  setItem(item, value) {
+    data[item] = value;
+    save();
+  },
+  get() {
+    return data;
+  },
+  set(value) {
+    data = value;
+    save();
+  },
+  // ee,
+};
+
+export default settingsService;
+
+init();

src/views/HomeView.vue

@@ -2,7 +2,7 @@
 
 import Result from '../components/Result.vue';
 import Code from '../components/Code.vue';
-import { WELCOME_CODE } from '../app.config';
+import { WELCOME_CODE, STORAGE_KEY_CODE } from '../app.config';
 
 import Worker from '../file.worker.js?worker';
 
@@ -13,8 +13,6 @@ import SplitterPanel from 'primevue/splitterpanel';
 
 import { defineComponent, shallowRef } from 'vue';
 
-const STORAGE_KEY_CODE = 'code';
-
 export default defineComponent({
   components: {
     Splitter, SplitterPanel,

src/views/SettingsView.vue

@@ -2,6 +2,13 @@
 import { defineComponent } from 'vue';
 import InputSwitch from 'primevue/inputswitch';
 
+import settingsService from '../services/settingsService';
+
+const DEFAULT_SETTINGS = {
+  autoScroll: false,
+  autoPrint: true,
+};
+
 export default defineComponent({
   components: {
     InputSwitch,
@@ -17,10 +24,18 @@ export default defineComponent({
     };
     return {
       escDown,
-      autoScroll: false,
-      autoPrint: true,
+      so: Object.keys(DEFAULT_SETTINGS).reduce((so, key) => {
+        so[key] = settingsService.getItem(key) ?? DEFAULT_SETTINGS[key];
+        return so;
+      }, {}),
     };
   },
+  watch: {
+    so: {
+      deep: true,
+      handler: val => settingsService.set(val),
+    },
+  },
   mounted() {
     window.addEventListener('keydown', this.escDown);
   },
@@ -44,14 +59,15 @@ label {
     <h3>App Settings</h3>
 
     <p>
-      <InputSwitch v-model="autoScroll" inputId="autoScroll" />
+      <InputSwitch v-model="so.autoScroll" inputId="autoScroll" />
       <label for="autoScroll">Auto scroll result</label>
     </p>
 
     <p>
-      <InputSwitch v-model="autoPrint" inputId="autoPrint" />
+      <InputSwitch v-model="so.autoPrint" inputId="autoPrint" />
       <label for="autoPrint">Auto print expressions</label>
     </p>
 
+    <pre>{{ so }}</pre>
   </div>
 </template>