squirrel-gill

React Hooks about localStorage or sessionStorage.

Features

:notes: Free Choice. You can decide where the data is stored, sessionStorage or localStorage. You can even define a Map, proxy set and get as setItem and getItem respectively.

Note: Map is not persistant.

class MyStorage {
  // https://github.com/tc39/proposal-class-fields#private-fields
  #storage = new Map();

  getItem(key) {
    return this.#storage.get(key) ?? null;
  }

  setItem(key, value) {
    this.#storage.set(key, value);
  }

  removeItem(key) {
    this.#storage.delete(key);
  }
}

:star2: Sync Both In One Tab Or Multiple Tabs. Storage event handlers only fire if the storage event is triggered from another window. See for details. Now you don’t have to worry about this problem.

:feet: Tiny. No other dependencies but only native apis.

Install

With npm

npm install --save squirrel-gill

With yarn:

yarn add squirrel-gill

Usage

import useStorage from 'squirrel-gill';

// ...
const [name, setName] = useStorage(sessionStorage, 'name');
// or
const [name, setName] = useStorage(sessionStorage, 'name', "holybasil"); // `holybasil` will be put in storage as the initial value

Development

For dev dependencies,

npm i

Then

npm run example