Move Vue app to a js directory

js/src/syncDataWithLocalStorage.js

@@ -0,0 +1,36 @@
+/**
+ * This function should be called from a Vue component's "created" hook
+ * It will initialise a list of properties from local storage.
+ * It then sets up watchers for said properties to sync them back
+ * so that next time we load, the values persist.
+ *
+ * Arguments:
+ *   keyName: a string, used as the key in local storage
+ *   syncedObject: the object whose data you want to sync (usually `this`)
+ *   syncedData: an object, the keys of which set the properties to be synced
+ */
+export function syncDataWithLocalStorage(keyName, syncedObject, syncedData) {
+  const syncedKeys = Object.keys(syncedData);
+  // First, we try to retrieve the stored data
+  const storedString = localStorage.getItem(keyName);
+  if (storedString) {
+    const storedValues = JSON.parse(storedString);
+    for (const item of syncedKeys) {
+      if (item in storedValues) syncedObject[item] = storedValues[item];
+    }
+  }
+
+  // This function will update local storage with current values
+  let updateStoredValues = function() {
+    let newData = {};
+    for (const item of syncedKeys) {
+      newData[item] = syncedObject[item];
+    }
+    localStorage.setItem(keyName, JSON.stringify(newData));
+  };
+
+  // Now, set up watchers to update local storage when things change
+  for (const item of syncedKeys) {
+    syncedObject.$watch(item, updateStoredValues, { deep: true });
+  }
+}