# mnemosyne-synced-storage

> save and get data from multiple storage types and keep them in sync

Latest version **1.0.4** (published 2022-07-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install mnemosyne-synced-storage
pnpm add mnemosyne-synced-storage
yarn add mnemosyne-synced-storage
bun add mnemosyne-synced-storage
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2022-07-24 |
| First published | 2022-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 265.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nestyko |

## Links

- npm: https://www.npmjs.com/package/mnemosyne-synced-storage
- Repository: https://github.com/Nestyko/mnemosyne-synced-storage
- Homepage: https://github.com/Nestyko/mnemosyne-synced-storage#readme
- Issues: https://github.com/Nestyko/mnemosyne-synced-storage/issues
- npm.io page: https://npm.io/package/mnemosyne-synced-storage

## Dependencies (1)

- [query-string](https://npm.io/package/query-string.md) ^7.1.1

## Recent versions

- 1.0.4 (latest) — 2022-07-24
- 1.0.3 — 2022-06-21
- 1.0.2 — 2022-06-21
- 1.0.1 — 2022-06-18
- 1.0.0 — 2022-06-18
- 0.1.0 — 2022-06-18
- 0.0.2 — 2022-06-13
- 0.0.1 — 2022-06-13

## README

# mnemosyne-synced-storage

This library helps storing data in between different providers and keeping them in sync. For example: you can keep data in sync between the url parameters, localStorage, and browser cache.

### Instalation

```bash
npm i --save mnemosyne-synced-storage
```

```bash
yarn add mnemosyne-synced-storage
```


## Getting Started

### React

```tsx
// App.tsx
import {MultiStorageAdapter} from 'mnemosyne-synced-storage'
import {urlParamsAdapter, chromeStorageAdapter, localStorageAdapter} from 'mnemosyne-synced-storage/adapters'
import {MnemosyneProvider} from 'mnemosyne-synced-storage/react'

const App = () => {
  const storageAdapter = new MultiStorageAdapter([
    urlParamsAdapter(),
    chromeStorageAdapter(),
    localStorageAdapter(),
  ])
  
  return (
   <MnemosyneProvider adapter={storageAdapter}>
    <MyComponent />
   </MnemosyneProvider> 
  )
}
```

```tsx
// MyComponent.tsx
import {useSyncedStorage} from 'mnemosyne-synced-storage/react'

const MyComponent = () => {
    // use it just like "useState"
    const [userId, setUserId] = useSyncedStorage<string>({key: 'user-id', defaultValue: ''})
    const handleUserIdChange = (e) => setUserId(e.target.value)
    return (
        <input onChange={handleUserIdChange} name="user-id" />
    )
}
```

### Vanilla

```ts
import {MultiStorageAdapter} from 'mnemosyne-synced-storage'
import {urlParamsAdapter, chromeStorageAdapter, localStorageAdapter} from 'mnemosyne-synced-storage/adapters'

const storageAdapter = new MultiStorageAdapter([
    urlParamsAdapter(),
    chromeStorageAdapter(),
    localStorageAdapter(),
  ])
  
storageAdapter.set('user-id', '123')

const userId = storageAdapter.get('user-id')

```


### Order of storage

For the MultistorageAdapter: 

* it will first try to get data from the first adapter and then the next one, if none of it has data then it will return null.
* If one of the storage types has data then it will return the first one it encounters, in the example above it will try to get first data from the url and then from chrome cache and then from localStorage.

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