Skip to content

React Hooks about `localStorage` or `sessionStorage`

License

Notifications You must be signed in to change notification settings

Holybasil/squirrel-gill

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm downloads npm version

squirrel-gill

React Hooks about localStorage or sessionStorage.

Features

🎶 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);
  }
}

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

🐾 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

About

React Hooks about `localStorage` or `sessionStorage`

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published