https://github.com/alxgmpr/preact-localstorage-state

Experimental Preact component bundle that uses LocalStorage to manage state. Bundles to ~4.5kB.
https://github.com/alxgmpr/preact-localstorage-state

bundle localstorage preact rollup

Last synced: about 20 hours ago
JSON representation

Experimental Preact component bundle that uses LocalStorage to manage state. Bundles to ~4.5kB.

• Host: GitHub
• URL: https://github.com/alxgmpr/preact-localstorage-state
• Owner: alxgmpr
• Created: 2023-04-01T01:07:37.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-02T23:57:00.000Z (almost 2 years ago)
• Last Synced: 2023-08-02T10:09:55.499Z (over 1 year ago)
• Topics: bundle, localstorage, preact, rollup
• Language: TypeScript
• Homepage:
• Size: 1.32 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Using LocalStorage for state in Preact

Experimental Preact component bundle that uses LocalStorage to manage state. Bundles to ~4.5kB.

Shows tracking a counter state via LocalStorage.

![demo](docs/img/demo.gif)

## Why is this useful?

1. Preact is smaller and lighter weight than React

2. Context requires rendering under common root and sharing same provider and can't always be used

3. Synchronous across tabs with no polling

4. Nest JSON compatible pieces of state under one LocalStorage key

## Why is this not useful?

1. LocalStorage is highly mutable. Don't use this for anything remotely sensitive.

2. This is not a state management system like Redux (though you probably don't need that either lol)

3. LocalStorage is persistent, it's not always a good representation of page state.

## Build

Generate the bundle with:

`npm run build`

`iife.js` is the main output, though the components can be used separately through the ESM build.

## Demo

`open index.html`