mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
b6fa25c3e7* chore(deps-dev): upgrade carbon-components to v10.39.0 * fix(data-table): deprecate Table shouldShowBorder prop Ref:0f7324156* fix(form-group): add legendId Ref:4fc56c30b* feat(number-input): support readonly variant Ref:d0bd8eddb* feat(multi-select): export multiSelectRef, fieldRef, selectionRef * feat(local-storage): add clearItem, clearAll instance methods * docs(local-storage): simplify clear example * docs(local-storage): add instructions [ci skip] * chore(local-storage): reset value on clear [ci skip] * chore(local-storage): revert value clear [ci skip]
23 lines
No EOL
966 B
Text
23 lines
No EOL
966 B
Text
<script>
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
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.
|
|
|
|
<FileSource src="/framed/LocalStorage/LocalStorage" />
|
|
|
|
### 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.
|
|
|
|
In the following example, toggle the switch and reload the page. Then, click the "Clear storage" button. Refresh the page; the theme should be reset to the untoggled state.
|
|
|
|
<FileSource src="/framed/LocalStorage/LocalStorageClear" /> |