Skip to content

Module for storeon to persist data from state to local storage

License

Notifications You must be signed in to change notification settings

storeon/localstorage

This branch is 1 commit ahead of, 4 commits behind master.

Folders and files

NameName
Last commit message
Last commit date
Mar 12, 2021
Mar 10, 2021
May 1, 2019
Jul 17, 2019
Mar 11, 2020
May 6, 2019
Mar 12, 2021
May 1, 2019
Mar 10, 2021
May 5, 2019
Mar 10, 2021
Mar 10, 2021
Mar 12, 2021
Jan 27, 2022

Repository files navigation

Storeon localStorage

Storeon logo by Anton Lovchikov

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 282 bytes module (it uses Size Limit to control the size) without any dependencies.

Installation

npm install @storeon/localstorage

If you need to support IE, you need to compile node_modules with Babel.

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.

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.

import { StoreContext, useStoreon } = require('storeon/react')

const Form = () => {
  const { dispatch, name } = useStoreon('name')

  return (
    <React.Fragment>
      {name !== '' && <h3>Hello {name}!</h3>}
      {name === '' &&
        <div>
          <label>Name</label>
          <input type="text" id="name" />
          <br/>
          <button onClick={
            () => dispatch('save', document.getElementById('name').value)
          }>Save</button>
        </div>
      }
    </React.Fragment>
  )
}

Event after refresh the page the state is updating from localStorage. And user see the greeting message.

Example of store state to local storage

persistState(paths, config)

paths parameter

type paths = Void | Array<String> | Array<RegExp>

If no value is provided to paths, then persistState stores all state in local storage.

config parameter

type config.key = String

Default value of config.key is storeon. This key is using to store data in local storage.

type config.storage = Storage

Set config.storage with sessionStorage or other Storage implementation to change storage target. Otherwise localStorage is used (default).

type config.serializer = (object: any) => string

Set config.serializer to change serialization function. JSON.stringify is used by default.

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.