# jrestore

> Use your localStorage as a reactive JSON store (usable via React hooks or without React)

Latest version **1.0.2** (published 2019-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install jrestore
pnpm add jrestore
yarn add jrestore
bun add jrestore
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-04-28 |
| First published | 2019-04-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 102.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Strebler |
| Maintainers | ostrebler |

## Links

- npm: https://www.npmjs.com/package/jrestore
- Repository: https://github.com/ostrebler/jrestore
- Homepage: https://github.com/ostrebler/jrestore#readme
- Issues: https://github.com/ostrebler/jrestore/issues
- npm.io page: https://npm.io/package/jrestore

## Recent versions

- 1.0.2 (latest) — 2019-04-28
- 1.0.1 — 2019-04-28
- 1.0.0 — 2019-04-28

## README

# 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.

```javascript
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

```javascript
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

```javascript
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

```javascript
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
```

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