https://github.com/holybasil/squirrel-gill
React Hooks about `localStorage` or `sessionStorage`
https://github.com/holybasil/squirrel-gill
Last synced: 2 months ago
JSON representation
React Hooks about `localStorage` or `sessionStorage`
- Host: GitHub
- URL: https://github.com/holybasil/squirrel-gill
- Owner: Holybasil
- License: mit
- Created: 2021-06-19T10:20:48.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-15T07:26:53.000Z (about 2 years ago)
- Last Synced: 2025-03-21T00:13:43.024Z (2 months ago)
- Language: JavaScript
- Size: 198 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/squirrel-gill)
[](https://www.npmjs.com/package/squirrel-gill)
# 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.
```js
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](https://stackoverflow.com/questions/3055013/html5-js-storage-event-handler). 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
```js
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,
```sh
npm i
```
Then
```sh
npm run example
```