# stencil-store-storage

> Stencil Store Storage is a simple way to keep a stencil store synced with either `localStorage` or `sessionStorage`. You can also provide your own storage. It just need to implement two methods:

Latest version **0.2.0** (published 2020-05-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install stencil-store-storage
pnpm add stencil-store-storage
yarn add stencil-store-storage
bun add stencil-store-storage
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-05-23 |
| First published | 2020-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sergio Arbeo |
| Maintainers | serabe |
| Keywords | stencil, store, localStorage, sessionStorage, hooks |

## Links

- npm: https://www.npmjs.com/package/stencil-store-storage
- Homepage: https://github.com/Serabe/stencil-store-storage
- npm.io page: https://npm.io/package/stencil-store-storage

## Alternatives

- [localforage](https://npm.io/package/localforage.md) — 6.2M weekly downloads
- [localforage-observable](https://npm.io/package/localforage-observable.md) — 30.8K weekly downloads
- [@y/y](https://npm.io/package/@y/y.md) — 30.1K weekly downloads
- [@metaobjectsdev/render](https://npm.io/package/@metaobjectsdev/render.md) — 3.5K weekly downloads
- [@ledgerhq/coin-algorand](https://npm.io/package/@ledgerhq/coin-algorand.md) — 1.1K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2020-05-23
- 0.1.0 — 2020-05-21
- 0.0.1 — 2020-05-21
- 0.0.2 — 2020-05-21

## README

# Stencil Store Storage 

Stencil Store Storage is a simple way to keep a stencil store synced with either `localStorage` or `sessionStorage`.
You can also provide your own storage.
It just need to implement two methods:

1. `getItem(key: string): string | null`
2. `setItem(key: string, value: any): void`

## Install

```
npm install --save-dev stencil-store-storage
```

## Using it

```ts
import { createLocalStore } from 'stencil-store-storage';

export const values = createLocalStore('key-for-local-storage', {
  field: 'value',
  anotherField: Math.PI
});
```

If `createLocalStore` finds any value in `localStorage` for the given key,
those values will be automatically loaded. Any time a value is changed,
it will get synced to `localStorage`.

`createLocalStorage` can be passed an optional boolean as third-argument, in case
you want to listen for changes from other tabs. It defaults to `false`.

You can use `createSessionStore` the same way as `createLocalStore` with only two differences:

1. It will use `sessionStorage` instead of `localStorage`.
2. It does not get a third optional boolean value, and thus won't sync between
   tabs.

### Providing your own storage

You can use your own storage as long as it provides the two methods mentioned above. Assume we have a `cookie-jar` module that exposes a storage that keeps
our data in a cookie. We can use that with a stencil store just by:

```ts
import { cookieJar } from 'cookie-jar';
import { createStorageStore } from 'stencil-storage-store';

export const values = createStorageStore(cookieJar, 'key', {
  someField: 'some-value',
  someDifferentField: Math.E
});
```

---
_Source: https://npm.io/package/stencil-store-storage · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._