keep settings in storage

package-lock.json

@@ -12,6 +12,7 @@
         "@codemirror/theme-one-dark": "^6.1.0",
         "@gkucmierz/utils": "^1.12.1",
         "codemirror": "^6.0.1",
+        "eventemitter3": "^4.0.7",
         "javascript-stringify": "^2.1.0",
         "meriyah": "^4.3.3",
         "normalize.css": "^8.0.1",
@@ -3369,6 +3370,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -8738,6 +8744,11 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
     "events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "@codemirror/theme-one-dark": "^6.1.0",
     "@gkucmierz/utils": "^1.12.1",
     "codemirror": "^6.0.1",
+    "eventemitter3": "^4.0.7",
     "javascript-stringify": "^2.1.0",
     "meriyah": "^4.3.3",
     "normalize.css": "^8.0.1",

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>