Svelte Persist Store
This module makes possible to create writable and readable svelte stores that can be persisted in localStorage or sessionStorage, with or without compression. The created store will be automatically hydrated from the web storage stored value, if there's any. lz-string is used for compression.
Svelte Persist Store
This module makes possible to create writable and readable svelte stores that can be persisted in localStorage or sessionStorage, with or without compression. The created store will be automatically hydrated from the web storage stored value, if there's any. lz-string is used for compression.
Install
# you can use yarn
yarn add @n0n3br/svelte-persist-store
# or npm
npm install @n0n3br/svelte-persist-store
Usage
<!-- App.svelte -->
<script>
import { writable, readable } from '@n0n3br/svelte-persist-store';
import { onMount } from 'svelte';
onMount(() => {
const writableStore = writabe('writable', 0);
const readableStore = readable('readable', new Date(), set => setTimeout(() => set(new Date()), 1000)));
});
const incrementCounter = () => writableStore.update(s => s + 1)
</script>
<main>
<h1>The current time is {$readableStore.toLocaleString()}</h1>
<hr />
<h1>Counter value {$writableStore}</h1>
<button on:click="{incrementCounter}">Increment Counter</button>
</main>
API
writable
Creates a writable Svelte Store.
It accetps 3 parameters, in the order presented below:
| Name | Required | Default value | Description |
|---|---|---|---|
| name | ✓ | the name that will be used to persist de store state in web storage | |
| initialState | ✓ | the initial state of the store | |
| options | { compress: false, mode: 'local' } | an object with 2 keys, compress (boolean) and mode (local or session). |
readable
Creates a readable Svelte store.
It accepts 4 parameters, in the order presented below:
| Name | Required | Default Value | Description |
|---|---|---|---|
| name | ✓ | the name that will be used to persist de store state in web storage | |
| initialState | ✓ | the initial state of the store | |
| callback | ✓ | the callback function that will set the store value. it's the only way to update de store. the callback function receives the set function as a parameter. the set function can then be used to change the store value | |
| options | { compress: false, mode: 'local' } | an object with 2 keys, compress (boolean) and mode (local or session). |
Tests
You can run the automated tests with the command
# you can use yarn
yarn test
# or npm
npm test
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
Authors
 |
|---|
| Rogério Amorim |
See also the list of contributors who participated in this project.
License
