feat: add WebStorage to address localStorage or sessionStorage

feat: make LocalStorage use WebStorage
feat: add SessionStorage using WebStorage
feat: make key in WebStorage reactive
feat: add updateKey event in case key changed

types/LocalStorage/LocalStorage.svelte.d.ts

@@ -18,8 +18,9 @@ export interface LocalStorageProps {
 export default class LocalStorage extends SvelteComponentTyped<
   LocalStorageProps,
   {
-    save: CustomEvent<null>;
-    update: CustomEvent<{ prevValue: any; value: any }>;
+    save: WindowEventMap["save"];
+    update: WindowEventMap["update"];
+    updateKey: WindowEventMap["updateKey"];
   },
   {}
 > {

types/LocalStorage/SessionStorage.svelte.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface SessionStorageProps {
+  /**
+   * Specify the local storage key
+   * @default "session-storage-key"
+   */
+  key?: string;
+
+  /**
+   * Provide a value to persist
+   * @default ""
+   */
+  value?: any;
+}
+
+export default class SessionStorage extends SvelteComponentTyped<
+  SessionStorageProps,
+  {
+    save: WindowEventMap["save"];
+    update: WindowEventMap["update"];
+    updateKey: WindowEventMap["updateKey"];
+  },
+  {}
+> {
+  /**
+   * Remove the persisted key value from the browser's local storage
+   */
+  clearItem: () => void;
+
+  /**
+   * Clear all key values from the browser's local storage
+   */
+  clearAll: () => void;
+}

types/LocalStorage/WebStorage.svelte.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface WebStorageProps {
+  /**
+   * Specify the local storage key
+   * @default "storage-key"
+   */
+  key?: string;
+
+  /**
+   * Provide a value to persist
+   * @default ""
+   */
+  value?: any;
+
+  /**
+   * Select WebStorage to use
+   * @default "local"
+   */
+  storage?: "local" | "session";
+}
+
+export default class WebStorage extends SvelteComponentTyped<
+  WebStorageProps,
+  {
+    save: CustomEvent<null>;
+    updateKey: CustomEvent<{ prevKey: any; key: any }>;
+    update: CustomEvent<{ prevValue: any; value: any }>;
+  },
+  {}
+> {
+  /**
+   * Remove the persisted key value from the browser's selected WebStorage
+   */
+  clearItem: () => void;
+
+  /**
+   * Clear all key values from the browser's selected WebStorage
+   */
+  clearAll: () => void;
+}

types/index.d.ts

@@ -75,6 +75,8 @@ export { default as ListBoxSelection } from "./ListBox/ListBoxSelection.svelte";
 export { default as ListItem } from "./ListItem/ListItem.svelte";
 export { default as Loading } from "./Loading/Loading.svelte";
 export { default as LocalStorage } from "./LocalStorage/LocalStorage.svelte";
+export { default as SessionStorage } from "./LocalStorage/SessionStorage.svelte";
+export { default as WebStorage } from "./LocalStorage/WebStorage.svelte";
 export { default as MultiSelect } from "./MultiSelect/MultiSelect.svelte";
 export { default as Modal } from "./Modal/Modal.svelte";
 export { default as ToastNotification } from "./Notification/ToastNotification.svelte";