mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-21 04:39:19 +00:00
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
This commit is contained in:
Manuel Coenen
parent
b4e7e735b3
commit
c54a8b5178
17 changed files with 574 additions and 68 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 171,
|
||||
"total": 173,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -5995,7 +5995,7 @@
|
|||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "value",
|
||||
|
|
@ -6013,7 +6013,7 @@
|
|||
"kind": "function",
|
||||
"description": "Remove the persisted key value from the browser's local storage",
|
||||
"type": "() => void",
|
||||
"value": "() => { localStorage.removeItem(key); }",
|
||||
"value": "() => { storage.removeItem(key); }",
|
||||
"isFunction": true,
|
||||
"isFunctionDeclaration": true,
|
||||
"constant": false,
|
||||
|
|
@ -6024,7 +6024,7 @@
|
|||
"kind": "function",
|
||||
"description": "Clear all key values from the browser's local storage",
|
||||
"type": "() => void",
|
||||
"value": "() => { localStorage.clear(); }",
|
||||
"value": "() => { storage.clear(); }",
|
||||
"isFunction": true,
|
||||
"isFunctionDeclaration": true,
|
||||
"constant": false,
|
||||
|
|
@ -6034,12 +6034,9 @@
|
|||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{ "type": "dispatched", "name": "save", "detail": "null" },
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "update",
|
||||
"detail": "{ prevValue: any; value: any; }"
|
||||
}
|
||||
{ "type": "forwarded", "name": "save", "element": "WebStorage" },
|
||||
{ "type": "forwarded", "name": "update", "element": "WebStorage" },
|
||||
{ "type": "forwarded", "name": "updateKey", "element": "WebStorage" }
|
||||
],
|
||||
"typedefs": []
|
||||
},
|
||||
|
|
@ -9950,6 +9947,64 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "label" }
|
||||
},
|
||||
{
|
||||
"moduleName": "SessionStorage",
|
||||
"filePath": "src/LocalStorage/SessionStorage.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "key",
|
||||
"kind": "let",
|
||||
"description": "Specify the local storage key",
|
||||
"type": "string",
|
||||
"value": "\"session-storage-key\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "value",
|
||||
"kind": "let",
|
||||
"description": "Provide a value to persist",
|
||||
"type": "any",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "clearItem",
|
||||
"kind": "function",
|
||||
"description": "Remove the persisted key value from the browser's local storage",
|
||||
"type": "() => void",
|
||||
"value": "() => { storage.removeItem(key); }",
|
||||
"isFunction": true,
|
||||
"isFunctionDeclaration": true,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "clearAll",
|
||||
"kind": "function",
|
||||
"description": "Clear all key values from the browser's local storage",
|
||||
"type": "() => void",
|
||||
"value": "() => { storage.clear(); }",
|
||||
"isFunction": true,
|
||||
"isFunctionDeclaration": true,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "save", "element": "WebStorage" },
|
||||
{ "type": "forwarded", "name": "update", "element": "WebStorage" },
|
||||
{ "type": "forwarded", "name": "updateKey", "element": "WebStorage" }
|
||||
],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "SideNav",
|
||||
"filePath": "src/UIShell/SideNav/SideNav.svelte",
|
||||
|
|
@ -13838,6 +13893,83 @@
|
|||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "ul" }
|
||||
},
|
||||
{
|
||||
"moduleName": "WebStorage",
|
||||
"filePath": "src/LocalStorage/WebStorage.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "key",
|
||||
"kind": "let",
|
||||
"description": "Specify the local storage key",
|
||||
"type": "string",
|
||||
"value": "\"storage-key\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "value",
|
||||
"kind": "let",
|
||||
"description": "Provide a value to persist",
|
||||
"type": "any",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "storage",
|
||||
"kind": "let",
|
||||
"description": "Select WebStorage to use",
|
||||
"type": "\"local\"|\"session\"",
|
||||
"value": "\"local\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "clearItem",
|
||||
"kind": "function",
|
||||
"description": "Remove the persisted key value from the browser's selected WebStorage",
|
||||
"type": "() => void",
|
||||
"value": "() => { webStorage.removeItem(key); }",
|
||||
"isFunction": true,
|
||||
"isFunctionDeclaration": true,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "clearAll",
|
||||
"kind": "function",
|
||||
"description": "Clear all key values from the browser's selected WebStorage",
|
||||
"type": "() => void",
|
||||
"value": "() => { webStorage.clear(); }",
|
||||
"isFunction": true,
|
||||
"isFunctionDeclaration": true,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{ "type": "dispatched", "name": "save", "detail": "null" },
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "updateKey",
|
||||
"detail": "{ prevKey: any; key: any; }"
|
||||
},
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "update",
|
||||
"detail": "{ prevValue: any; value: any; }"
|
||||
}
|
||||
],
|
||||
"typedefs": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
23
docs/src/pages/components/SessionStorage.svx
Normal file
23
docs/src/pages/components/SessionStorage.svx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
This utility component wraps the [Window.sessionStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level for the duration of the current tab session.
|
||||
|
||||
### Reactive example
|
||||
|
||||
In the example below, toggle the switch and reload the page. The updated theme should be persisted locally.
|
||||
|
||||
<FileSource src="/framed/LocalStorage/SessionStorage" />
|
||||
|
||||
### 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 session 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/SessionStorageClear" />
|
||||
24
docs/src/pages/components/WebStorage.svx
Normal file
24
docs/src/pages/components/WebStorage.svx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
This utility component wraps the [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) and is useful for persisting ephemeral data (e.g., color theme) at the browser level
|
||||
either in localStorage or sessionStorage.
|
||||
|
||||
### Reactive example
|
||||
|
||||
In the example below, toggle the switch and reload the page. The updated theme should be persisted locally.
|
||||
|
||||
<FileSource src="/framed/LocalStorage/WebStorage" />
|
||||
|
||||
### 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 session 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/WebStorageClear" />
|
||||
27
docs/src/pages/framed/LocalStorage/SessionStorage.svelte
Normal file
27
docs/src/pages/framed/LocalStorage/SessionStorage.svelte
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<script>
|
||||
import { SessionStorage, Toggle } from "carbon-components-svelte";
|
||||
|
||||
let toggled = false;
|
||||
let events = [];
|
||||
|
||||
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
|
||||
</script>
|
||||
|
||||
<SessionStorage
|
||||
key="dark-mode"
|
||||
bind:value="{toggled}"
|
||||
on:save="{() => {
|
||||
events = [...events, { event: 'on:save' }];
|
||||
}}"
|
||||
on:update="{({ detail }) => {
|
||||
events = [...events, { event: 'on:update', detail }];
|
||||
}}"
|
||||
/>
|
||||
|
||||
<Toggle size="sm" labelText="Dark mode" bind:toggled />
|
||||
|
||||
<br />
|
||||
|
||||
<pre>
|
||||
{JSON.stringify(events, null, 2)}
|
||||
</pre>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
import { SessionStorage, Toggle, Button } from "carbon-components-svelte";
|
||||
|
||||
let storage;
|
||||
let toggled = false;
|
||||
|
||||
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
|
||||
</script>
|
||||
|
||||
<SessionStorage bind:this="{storage}" bind:value="{toggled}" />
|
||||
|
||||
<Toggle size="sm" labelText="Dark mode" bind:toggled />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<Button size="small" on:click="{storage.clearAll}">Clear storage</Button>
|
||||
28
docs/src/pages/framed/LocalStorage/WebStorage.svelte
Normal file
28
docs/src/pages/framed/LocalStorage/WebStorage.svelte
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script>
|
||||
import { WebStorage, Toggle } from "carbon-components-svelte";
|
||||
|
||||
let toggled = false;
|
||||
let events = [];
|
||||
|
||||
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
|
||||
</script>
|
||||
|
||||
<WebStorage
|
||||
key="dark-mode"
|
||||
bind:value="{toggled}"
|
||||
storage="local"
|
||||
on:save="{() => {
|
||||
events = [...events, { event: 'on:save' }];
|
||||
}}"
|
||||
on:update="{({ detail }) => {
|
||||
events = [...events, { event: 'on:update', detail }];
|
||||
}}"
|
||||
/>
|
||||
|
||||
<Toggle size="sm" labelText="Dark mode" bind:toggled />
|
||||
|
||||
<br />
|
||||
|
||||
<pre>
|
||||
{JSON.stringify(events, null, 2)}
|
||||
</pre>
|
||||
17
docs/src/pages/framed/LocalStorage/WebStorageClear.svelte
Normal file
17
docs/src/pages/framed/LocalStorage/WebStorageClear.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script>
|
||||
import { WebStorage, Toggle, Button } from "carbon-components-svelte";
|
||||
|
||||
let storage;
|
||||
let toggled = false;
|
||||
|
||||
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
|
||||
</script>
|
||||
|
||||
<WebStorage bind:this="{storage}" bind:value="{toggled}" storage="local" />
|
||||
|
||||
<Toggle size="sm" labelText="Dark mode" bind:toggled />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<Button size="small" on:click="{storage.clearAll}">Clear storage</Button>
|
||||
Loading…
Add table
Add a link
Reference in a new issue