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.
-+ {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<