diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index c9059e12..c41c2973 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2241,10 +2241,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | -------------------------------- | ----------------------------- | -| value | let | Yes | any | "" | Provide a value to persist | -| key | let | No | string | "local-storage-key" | Specify the local storage key | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :-------------------- | :------- | :---------------------- | ---------------------------------------------------- | --------------------------------------------------------------- | +| value | let | Yes | any | "" | Provide a value to persist | +| key | let | No | string | "local-storage-key" | Specify the local storage key | +| clearItem | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage | +| clearAll | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 62918065..29ce2bac 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -5351,6 +5351,26 @@ "isFunction": false, "constant": false, "reactive": true + }, + { + "name": "clearItem", + "kind": "function", + "description": "Remove the persisted key value from the browser's local storage", + "type": "() => void", + "value": "() => { localStorage.removeItem(key); }", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "clearAll", + "kind": "function", + "description": "Clear all key values from the browser's local storage", + "type": "() => void", + "value": "() => { localStorage.clear(); }", + "isFunction": true, + "constant": false, + "reactive": false } ], "slots": [], diff --git a/docs/src/pages/components/LocalStorage.svx b/docs/src/pages/components/LocalStorage.svx index b2250719..f9d85fac 100644 --- a/docs/src/pages/components/LocalStorage.svx +++ b/docs/src/pages/components/LocalStorage.svx @@ -5,5 +5,17 @@ This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level. ### Reactive example + +In the example below, toggle the switch and reload the page. The updated theme should be persisted locally. - \ No newline at end of file + + +### Clear item, clear all + +Use the `bind:this` directive to access the `clearItem` and `clearAll` methods. + +Invoking `clearItem` will remove the persisted key value from the browser's local storage. + +Invoking `clearAll` will remove all key values. + + \ No newline at end of file diff --git a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte index c6115dc5..d7aea0de 100644 --- a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte +++ b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte @@ -1,7 +1,6 @@ + + + + + +
+
+ + + +
+
+ +
+    {JSON.stringify(events, null, 2)}
+  
diff --git a/src/LocalStorage/LocalStorage.svelte b/src/LocalStorage/LocalStorage.svelte index 66cfa8e0..6e46c277 100644 --- a/src/LocalStorage/LocalStorage.svelte +++ b/src/LocalStorage/LocalStorage.svelte @@ -15,6 +15,22 @@ */ export let value = ""; + /** + * Remove the persisted key value from the browser's local storage + * @type {() => void} + */ + export function clearItem() { + localStorage.removeItem(key); + } + + /** + * Clear all key values from the browser's local storage + * @type {() => void} + */ + export function clearAll() { + localStorage.clear(); + } + import { onMount, afterUpdate, createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher(); diff --git a/types/LocalStorage/LocalStorage.d.ts b/types/LocalStorage/LocalStorage.d.ts index f0c93cd5..493ada38 100644 --- a/types/LocalStorage/LocalStorage.d.ts +++ b/types/LocalStorage/LocalStorage.d.ts @@ -13,6 +13,18 @@ export interface LocalStorageProps { * @default "" */ value?: any; + + /** + * Remove the persisted key value from the browser's local storage + * @default () => { localStorage.removeItem(key); } + */ + clearItem?: () => void; + + /** + * Clear all key values from the browser's local storage + * @default () => { localStorage.clear(); } + */ + clearAll?: () => void; } export default class LocalStorage extends SvelteComponentTyped<