jrestore

Install

yarn add jrestore

Basic usage

jrestore not only converts your regular string-oriented localStorage into a JSON storage, you can also subscribe to changes. It makes use of localStorage in the background, so everything is persistent. It can be used with or without React.

import jrestore from 'jrestore'

jrestore.setItem('mykey', { a: 12, b: true })
console.log(
  jrestore.getItem('mykey') // { a: 12, b: true }
)

jrestore.removeItem('mykey')
console.log(
  jrestore.getItem('mykey') // undefined
)

jrestore.setItem('mykey', [1, 2, 3])
jrestore.clear() // removes all keys
console.log(
  jrestore.getItem('mykey') // undefined
)

jrestore.setItem('mykey', 0) // mykey is set to 0
jrestore.setItem('mykey', value => value + 1) // mykey is set to 1

Events

const listener = value => console.log('Value changed :', value)
jrestore.addListener('mykey', listener)

jrestore.setItem('mykey', -452) // Prints "Value changed : -452"
jrestore.setItem('mykey', [1, 2])   // Prints "Value changed : [1, 2]"
jrestore.setItem('mykey', arr => [...arr, 3]) // Prints "Value changed : [1, 2, 3]"
jrestore.clear()                // Prints "Value changed : undefined"
jrestore.setItem('mykey', true) // Prints "Value changed : true"
jrestore.removeItem('mykey')    // Prints "Value changed : undefined"

jrestore.removeListener('mykey', listener)

jrestore.setItem('mykey', -452) // Prints nothing

Usage with React

import React from 'react
import jrestore from 'jrestore'

jrestore.React = React // Don't forget !

const ComponentA = () => {
  const counter = jrestore.useItem('counter') // reacts to changes
  return (
    <button onClick={() => jrestore.setItem('counter', counter + 1)}>
      Increment {counter}
    </button>
  )
}

const ComponentB = () => {
  const counter = jrestore.useItem('counter', 0) // default value, when the 'counter' is still unset
  return (
    <button onClick={() => jrestore.setItem('counter', counter + 1)}>
      Increment {counter}
    </button>
  )
}

const ComponentC = () => (
  <button onClick={() => jrestore.setItem('counter', counter => counter + 1)}>
    Increment
  </button>
)

const ComponentD = () => {
  const object = jrestore.useItem('myobj', { a: 12, b: [true] })
  if(!object)
    return <b>Object was removed</b>
  return (
    <button onClick={() => jrestore.removeItem('myobj')}>
      Remove
    </button>
  )
}

Settings

jrestore.prefix = 'myprefix' // A prefix for all your keys in the localStorage, choose a prefix unique to your app and your domain (defaults to an empty string)
jrestore.React = React // Your version of React (must support hooks), nothing set by default
jrestore.store = window.localStorage // The persistent storage, set by default
jrestore.serialize = JSON.stringify // The "JSON to string" converter, set by default
jrestore.deserialize = JSON.parse // The "string to JSON" converter, set by default