https://github.com/matssom/svelte-storable

:file_folder: Package that adds automatic localStorage to 'writable' from svelte.
https://github.com/matssom/svelte-storable

localstorage state-management storable store svelte svelte-stores svelte3 writable

Last synced: 3 months ago
JSON representation

:file_folder: Package that adds automatic localStorage to 'writable' from svelte.

• Host: GitHub
• URL: https://github.com/matssom/svelte-storable
• Owner: matssom
• License: mit
• Created: 2020-11-10T14:28:12.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-11-17T14:11:57.000Z (about 4 years ago)
• Last Synced: 2024-09-29T12:07:27.155Z (3 months ago)
• Topics: localstorage, state-management, storable, store, svelte, svelte-stores, svelte3, writable
• Language: JavaScript
• Homepage:
• Size: 71.3 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelte Storable

Svelte Storable is an extention to the `writable` store that comes with `svelte/store`. The purpose of the package is to preserve the state of the store, even after refresh. 

Svelte Store adds `localStorage` management to the store while, with 1 exception preserves the api.




## Installation

**Include with npm:**

```

npm install svelte-storable

```

**Include locally:**

Download `storable.js` from [this](https://github.com/matssom/svelte-storable/) repository and include it in your project.




## Documentation

Use the [svelte writalbe](https://svelte.dev/docs#writable) doumentation as a companion to this documentation if you aren't comfortable with svelte stores.

**Creating a Store**

The api for `svelte-storable` matches almost identically to the `writable` from `svelte/store`. The key difference is that you need to provide a key to the `storable`. This key will be used when storing and retrieving the persisted data.

```js

// store.js

import { storable } from 'svelte-storable';

                                ||

                                \/

export const count = storable('count', 0);

```

**Using the Store**

Now you can use the store with all your usual `writable` methods. Additionally, you have the `detatch()` method. This can be used to remove the data from `localStorage` so that the value will be fresh on refresh.

:warning: **NB:** If you update the value after `detatch()` it will be stored again.

```html

    import { count } from './store';

    const increase  = () => count.update((value) => value + 1);

    const decrease  = () => count.update((value) => value - 1);

    const reset     = () => count.set(0);

    const detatch   = () => count.detatch();

{$count}

Increase Count

Decrese Count

Reset

Detatch from Storage


```

**Subscribe**

You can use the `$` syntax like any other svelte store or do it manually with unsubscribe/subscribe.

```js

const unsubscribe = count.subscribe(value => doSomething(value));

```

**Custom Stores**

With `writable` you can make custom stores. This functionallity also copies over to `svelte-storable`. Again, the key difference is that you need to provide a key. You can optionally take that key as a parameter to your `createStore()` function with a default value.

```js

// store.js

import { storable } from 'svelte-storable';

const createCountStore = (key = 'count') => {

    const { subscribe, set, update, detatch } = storable(key, 0);

    return {

        subscribe,

        increase:   () => update((value) => value + 1),

	decrease:   () => update((value) => value - 1),

	reset:      () => set(0),

        detatch:    () => detatch()

    }

}

export const count = createCountStore('count');

```

:warning: **NB:** Remember to provide different keys to all the different instances of your custom store. If two or more stores have the same key, they will update each other.