Merge c54a8b5178 into 0e370dd575

src/LocalStorage/LocalStorage.svelte

@@ -1,8 +1,5 @@
 <script>
-  /**
-   * @event {null} save
-   * @event {{ prevValue: any; value: any; }} update
-   */
+  import WebStorage from "./WebStorage.svelte";
 
   /**
    * Specify the local storage key
@@ -15,12 +12,15 @@
    */
   export let value = "";
 
+  /** Obtain a reference to the WebStorage element */
+  let storage = null;
+
   /**
    * Remove the persisted key value from the browser's local storage
    * @type {() => void}
    */
   export function clearItem() {
-    localStorage.removeItem(key);
+    storage.removeItem(key);
   }
 
   /**
@@ -28,44 +28,16 @@
    * @type {() => void}
    */
   export function clearAll() {
-    localStorage.clear();
+    storage.clear();
   }
-
-  import { onMount, afterUpdate, createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  let prevValue = value;
-
-  function setItem() {
-    if (typeof value === "object") {
-      localStorage.setItem(key, JSON.stringify(value));
-    } else {
-      localStorage.setItem(key, value);
-    }
-  }
-
-  onMount(() => {
-    const item = localStorage.getItem(key);
-
-    if (item != null) {
-      try {
-        value = JSON.parse(item);
-      } catch (e) {
-        value = item;
-      }
-    } else {
-      setItem(value);
-      dispatch("save");
-    }
-  });
-
-  afterUpdate(() => {
-    if (prevValue !== value) {
-      setItem(value);
-      dispatch("update", { prevValue, value });
-    }
-
-    prevValue = value;
-  });
 </script>
+
+<WebStorage
+  bind:this="{storage}"
+  bind:key
+  bind:value
+  storage="local"
+  on:save
+  on:update
+  on:updateKey
+/>

src/LocalStorage/SessionStorage.svelte

@@ -0,0 +1,43 @@
+<script>
+  import WebStorage from "./WebStorage.svelte";
+
+  /**
+   * Specify the local storage key
+   */
+  export let key = "session-storage-key";
+
+  /**
+   * Provide a value to persist
+   * @type {any}
+   */
+  export let value = "";
+
+  /** Obtain a reference to the WebStorage element */
+  let storage = null;
+
+  /**
+   * Remove the persisted key value from the browser's local storage
+   * @type {() => void}
+   */
+  export function clearItem() {
+    storage.removeItem(key);
+  }
+
+  /**
+   * Clear all key values from the browser's local storage
+   * @type {() => void}
+   */
+  export function clearAll() {
+    storage.clear();
+  }
+</script>
+
+<WebStorage
+  bind:this="{storage}"
+  bind:key
+  bind:value
+  storage="session"
+  on:save
+  on:update
+  on:updateKey
+/>

src/LocalStorage/WebStorage.svelte

@@ -0,0 +1,90 @@
+<script>
+  /**
+   * @event {null} save
+   * @event {{ prevKey: any; key: any; }} updateKey
+   * @event {{ prevValue: any; value: any; }} update
+   */
+
+  /**
+   * Specify the local storage key
+   */
+  export let key = "storage-key";
+
+  /**
+   * Provide a value to persist
+   * @type {any}
+   */
+  export let value = "";
+
+  /**
+   * Select WebStorage to use
+   * @type {"local"|"session"}
+   */
+  export let storage = "local";
+
+  $: webStorage = storage === "session" ? sessionStorage : localStorage;
+
+  /**
+   * Remove the persisted key value from the browser's selected WebStorage
+   * @type {() => void}
+   */
+  export function clearItem() {
+    webStorage.removeItem(key);
+  }
+
+  /**
+   * Clear all key values from the browser's selected WebStorage
+   * @type {() => void}
+   */
+  export function clearAll() {
+    webStorage.clear();
+  }
+
+  import { onMount, afterUpdate, createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let prevKey = key;
+  let prevValue = value;
+
+  function setItem() {
+    if (typeof value === "object") {
+      webStorage.setItem(key, JSON.stringify(value));
+    } else {
+      webStorage.setItem(key, value);
+    }
+  }
+
+  function init() {
+    const item = webStorage.getItem(key);
+
+    if (item != null) {
+      try {
+        value = JSON.parse(item);
+      } catch (e) {
+        value = item;
+      }
+    } else {
+      setItem(value);
+      dispatch("save");
+    }
+  }
+
+  onMount(() => {
+    init();
+  });
+
+  afterUpdate(() => {
+    if (prevKey !== key) {
+      init();
+      dispatch("updateKey", { prevKey, key });
+      prevKey = key;
+    }
+    if (prevValue !== value) {
+      setItem(value);
+      dispatch("update", { prevValue, value });
+    }
+
+    prevValue = value;
+  });
+</script>

src/LocalStorage/index.js

@@ -1 +1,3 @@
 export { default as LocalStorage } from "./LocalStorage.svelte";
+export { default as SessionStorage } from "./SessionStorage.svelte";
+export { default as WebStorage } from "./WebStorage.svelte";

src/index.js

@@ -68,7 +68,7 @@ export {
 } from "./ListBox";
 export { ListItem } from "./ListItem";
 export { Loading } from "./Loading";
-export { LocalStorage } from "./LocalStorage";
+export { LocalStorage, SessionStorage, WebStorage } from "./LocalStorage";
 export { MultiSelect } from "./MultiSelect";
 export { Modal } from "./Modal";
 export {