Saving settings to local storage

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {
@@ -15,15 +15,15 @@
   "license": "MIT",
   "devDependencies": {
     "6to5ify": "^4.1.1",
-    "babel": "^6.5.2",
-    "babel-core": "^6.18.2",
-    "babel-preset-es2015": "^6.18.0",
-    "browserify": "^13.1.1",
+    "babel": "^6.23.0",
+    "babel-core": "^6.23.1",
+    "babel-preset-es2015": "^6.22.0",
+    "browserify": "^14.1.0",
     "gulp": "^3.9.1",
     "gulp-cssmin": "^0.1.7",
     "gulp-preprocess": "^2.0.0",
     "gulp-rimraf": "^0.2.0",
-    "gulp-sass": "^2.3.2",
+    "gulp-sass": "^3.1.0",
     "gulp-streamify": "^1.0.2",
     "vinyl-source-stream": "^1.1.0"
   }

src/static/index.html

@@ -30,13 +30,13 @@
     <svg id="graph">
         <defs>
             <marker id="svgLineArrow-related" markerWidth="10" markerHeight="10" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
-                <path d="M0,0 L0,6 L9,3 z" fill="#ffb840"/>
+                <path d="M0,0 L0,6 L9,3 z" fill="#ffb840"></path>
             </marker>
             <marker id="svgLineArrow-similar" markerWidth="10" markerHeight="10" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
-                <path d="M0,0 L0,6 L9,3 z" fill="#7ca1ff"/>
+                <path d="M0,0 L0,6 L9,3 z" fill="#7ca1ff"></path>
             </marker>
             <marker id="svgLineArrow-other" markerWidth="10" markerHeight="10" refX="7" refY="3" orient="auto" markerUnits="strokeWidth">
-                <path d="M0,0 L0,6 L9,3 z" fill="#f00"/>
+                <path d="M0,0 L0,6 L9,3 z" fill="#f00"></path>
             </marker>
         </defs>
     </svg>
@@ -116,10 +116,10 @@ <h1>General Settings</h1>
                 <b>Data source:</b>
                 <input type="text" value="http://localhost" id="settings.host" autosize placeholder="http://host.name"/>
                 : <input id="settings.port" autosize type="number" placeholder="port" value="57772"/>
-                / <input id="settings.webAppName" autosize type="text" placeholder="domain" value="EntityBrowser"/>
+                / <input id="settings.webAppName" autosize type="text" placeholder="app name" value="EntityBrowser"/>
                 /domain/ <input id="settings.domain" autosize type="text" placeholder="domain" value="1"/>
                 /
-                <select id="settings.queryType">
+                <select id="settings.queryType" title="Query Type">
                     <option value="related">related</option>
                     <option value="similar">similar</option>
                 </select>

src/static/js/source/index.js

@@ -1,9 +1,22 @@
 import { httpGet } from "../utils";
+import * as storage from "../storage";
 
-let settings = {
+const STORAGE_KEY = "settings";
 
+let settings = { // assign defaults here
+    host: "http://localhost",
+    port: "57772",
+    webAppName: "EntityBrowser",
+    domain: "1",
+    queryType: "related",
+    seed: "crew"
 };
 
+let initialStorage = storage.load(STORAGE_KEY);
+for (let option in initialStorage) {
+    settings[option] = initialStorage[option];
+}
+
 export function getOption (opt) {
     return settings[opt];
 }
@@ -33,17 +46,28 @@ export function getData (callback) {
 }
 
 function bind (elements) {
-    elements.forEach(e => {
-        setValue(document.getElementById(e)).addEventListener(`change`, setValue)
-    });
+    for (let e of elements) {
+        setValue(document.getElementById(e)).addEventListener(`change`, setValue);
+    }
+}
+
+function saveSettings () {
+    storage.save(STORAGE_KEY, settings);
 }
 
 function setValue (e = {}) {
-    let id, el = e instanceof HTMLElement ? e : (e.target || e.srcElement);
+    let isEvent = !(e instanceof HTMLElement),
+        id, el = isEvent ? (e.target || e.srcElement) : e;
     if (!el)
         return e;
     if ((id = el.getAttribute(`id`)).indexOf(`settings.`) === 0) {
-        settings[id.replace(/^settings\./, ``)] = el.value;
+        let key = id.replace(/^settings\./, ``);
+        if (isEvent) {
+            settings[key] = el.value;
+            saveSettings();
+        } else {
+            el.value = settings[key];
+        }
     }
     return e;
 }

src/static/js/storage.js

@@ -0,0 +1,15 @@
+const STORAGE_NAME = "iKnowEntityBrowser";
+const storage = JSON.parse(localStorage.getItem(STORAGE_NAME)) || {};
+
+export function save (key, value) {
+    storage[key] = value;
+    updateLocalStorage();
+}
+
+export function load (key) {
+    return storage[key];
+}
+
+function updateLocalStorage () {
+    localStorage.setItem(STORAGE_NAME, JSON.stringify(storage));
+}