feat: implement localstorage store

2 files changed, 34 insertions, 2 deletions

diff --git a/src/App.svelte b/src/App.svelte
index a273fcc..27f7f73 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,17 @@
-<script></script>
+<script>
+  import { level } from "./stores";
+
+  function levelChanged(evt) {
+    level.set(Number(evt.data));
+  }
+</script>
 
 <div class="app">
-  <h2>Level: <input type="number" min="1" max="60" /></h2>
+  <h2>
+    Level: <input on:input={levelChanged} type="number" min="1" max="60" />
+  </h2>
+
+  Level is {$level}
 </div>
 
 <style></style>
diff --git a/src/stores.js b/src/stores.js
new file mode 100644
index 0000000..f203bfd
--- /dev/null
+++ b/src/stores.js
@@ -0,0 +1,22 @@
+import { writable } from "svelte/store";
+
+const localStorage = window.localStorage;
+
+export const level = localStorageStore(0);
+
+function localStorageStore(key) {
+  const item = localStorage.getItem(key);
+  const { subscribe, set } = writable(JSON.parse(item) || null);
+
+  return {
+    subscribe,
+    set: (value) => {
+      localStorage.setItem(key, JSON.stringify(value));
+      set(value);
+    },
+    clear: () => {
+      localStorage.removeItem(key);
+      set(null);
+    },
+  };
+}