Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/storeon/localstorage
Module for storeon to persist data from state to local storage
https://github.com/storeon/localstorage
Last synced: about 2 months ago
JSON representation
Module for storeon to persist data from state to local storage
- Host: GitHub
- URL: https://github.com/storeon/localstorage
- Owner: storeon
- License: mit
- Created: 2019-05-01T15:29:32.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:09:22.000Z (over 1 year ago)
- Last Synced: 2024-07-18T09:58:55.496Z (2 months ago)
- Language: JavaScript
- Size: 2.67 MB
- Stars: 65
- Watchers: 4
- Forks: 10
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Storeon localStorage
Tiny module for [Storeon] to store and sync state to `localStorage`. It restores state from `localStorage` during page loading and saves state on every change.
It is just 308 bytes module (it uses [Size Limit] to control the size) without any dependencies.
[Size Limit]: https://github.com/ai/size-limit
[Storeon]: https://github.com/storeon/storeon
## Installation
```
npm install @storeon/localstorage
```
If you need to support IE, you need to [compile `node_modules`] with Babel.
[compile `node_modules`]: https://developer.epages.com/blog/coding/how-to-transpile-node-modules-with-babel-and-webpack-in-a-monorepo/
## Usage
If you want to store and sync state to `localStorage` you should import the `persistState` from `@storeon/localstorage` and add this module to `createStoreon`.
```js
import { createStoreon } from 'storeon'
import { persistState } from '@storeon/localstorage'
let name = store => {
store.on('@init', () => ({ name: '' }))
store.on('save', (state, name) => ({ name: name }))
}
const store = createStoreon([
name,
persistState(['name'])
])
```
Here you can see that the form ask user the name and after that show this name.
```js
import { StoreContext, useStoreon } = require('storeon/react')
const Form = () => {
const { dispatch, name } = useStoreon('name')
return (
{name !== '' &&
Hello {name}!
}
{name === '' &&
Name
dispatch('save', document.getElementById('name').value)
}>Save
}
)
}
```
Event after refresh the page the state is updating from `localStorage`. And user see the greeting message.
### persistState(paths, config)
#### paths parameter
```js
type paths = Void | Array | Array
```
If no value is provided to `paths`, then `persistState` stores all state in local storage.
#### config parameter
```js
type config.key = String
```
Default value of `config.key` is `storeon`. This key is using to store data in local storage.
```js
type config.storage = Storage
```
Set `config.storage` with `sessionStorage` or other `Storage` implementation to change storage target. Otherwise `localStorage` is used (default).
```js
type config.serializer = (object: any) => string
```
Set `config.serializer` to change serialization function. `JSON.stringify` is used by default.
```js
type config.deserializer = (data: string) => any
```
Set `config.deserializer` to change deserialization function. `JSON.parse` is used by default.
## LICENSE
MIT
## Acknowledgments
This module based on [redux-localstorage](https://github.com/elgerlambert/redux-localstorage).