1.0.2 • Published 5 years ago
jrestore v1.0.2
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