React Hooks about localStorage
or sessionStorage
.
🎶 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.
With npm
npm install --save squirrel-gill
With yarn:
yarn add squirrel-gill
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
For dev dependencies,
npm i
Then
npm run example