# react-device-storage

> React package for using a device storage

Latest version **1.0.0** (published 2017-02-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-device-storage
pnpm add react-device-storage
yarn add react-device-storage
bun add react-device-storage
```

## 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.0 |
| Published | 2017-02-14 |
| First published | 2017-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ukey1 Community |
| Maintainers | asaritech |
| Keywords | react, localstorage, sessionstorage, cookies, cookie |

## Links

- npm: https://www.npmjs.com/package/react-device-storage
- Repository: https://github.com/asaritech/react-device-storage
- Homepage: https://github.com/asaritech/react-device-storage#readme
- Issues: https://github.com/asaritech/react-device-storage/issues
- npm.io page: https://npm.io/package/react-device-storage

## Dependencies (1)

- [cookie](https://npm.io/package/cookie.md) ^0.3.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-02-14

## README

# react-device-storage

An unified package for saving, reading and deleting data from/to sessionStorage, localStorage or cookies.
If user's device doesn't support sessionStorage and/or localStorage, the package uses cookies as a fallback.
Note it's designed for browsers only.

## Installation

`npm install --save react-device-storage`

## API

### cookies()

Enables using of cookies.

Returns `this`, so you can manipulate with data directly.

### localStorage()

Enables using of localStorage.

Returns `this`, so you can manipulate with data directly.

### sessionStorage()

Enables using of sessionStorage.

Returns `this`, so you can manipulate with data directly.

### save(key, value)

Saves data in selected storage. `key` should be a 'string', value may be whatever you want to store.

### read(key)

Reads data from selected storage.

### delete(key)

Deletes data from selected storage.

## Options

### cookieFallback
> Enable or disable cookies fallback **(boolean)**

### cookie
> Object of settings for cookies

#### cookie.path
> Cookie path<br />
> Use `/` as the path if you want your cookie to be accessible on all pages.<br />
> [default `/`]

#### cookie.maxAge
> Relative max age of the cookie from when the client receives it **(seconds)**
> [default `2592000` (30 days)]

#### cookie.domain
> Domain for the cookie<br />
> Use `https://*.yourdomain.com` if you want to access the cookie in all your subdomains.

#### cookie.secure
> Is only accessible through HTTPS? **(boolean)**

## Example

```js
import { Component } from 'react';
import DeviceStorage from 'react-device-storage';

import HelloWorld from './HelloWorld';

export default class MyApp extends Component {
  construct(props) {
    super(props);

    this.storage = new DeviceStorage({
      cookieFallback: true,
      cookie: {
        secure: true
      }
    }).localStorage();

    this.state = {
      name: this.storage.read('name')
    };
  }

  setName() {
    let name = 'User Name';

    this.storage.save('name', name);
    this.setState({
      name
    });
  }

  render() {
    return (
      <HelloWorld userName={this.state.name} onClick={this.setName.bind(this)} />
    );
  }
}
```

## Inspired by

- [react-cookie](https://www.npmjs.com/package/react-cookie)
- [react-localstorage](https://www.npmjs.com/package/react-localstorage)

## License

This code is released under the MIT license. Please see [LICENSE](https://github.com/asaritech/react-device-storage/blob/master/LICENSE) file for details.

## Contact

Reporting of any [issues](https://github.com/asaritech/react-device-storage/issues) are appreciated.

## Our projects

- Social Identity & Login Aggregator: [Ukey1](http://ukey.one)
- Ukey1 SDK for React: [ukey1-react-sdk](https://github.com/asaritech/ukey1-react-sdk/)

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