Letβs be honest: as web developers, managing state is our bread and butter. But when it comes to persisting that state in the browser?
π΅ Things get messy.
You’ve got localStorage, sessionStorage, IndexedDB… and if you’re feeling particularly adventurous, maybe you’ve even whispered the forbidden words:
“WebAssembly” and “SQLite” in a dark room π΅οΈββοΈ
π§ What If It Were Easy?
What if you could have a perfectly organized, unified APIβ One hook to find everything you need, exactly when you need it?
Well, I got tired of the mess, so I built it.
Letβs break down the usual suspects:
πͺͺ localStorage & sessionStorage
β
Great for simple key-value pairs
β Synchronous (blocking)
β Tiny 5MB limit
β Only stores strings
Want to save an object?
Prepare for your daily JSON.stringify() + JSON.parse() rituals.
(οΌ_οΌ) zzZ
π¦ IndexedDB
β
Powerful and asynchronous
β
Can store complex data
But the API is… ceremonial.
Itβs like trying to order a coffee by filing three forms in triplicate.
λ_λ
π§¨SQLite + WebAssembly
The absolute mad ladβs choice.
You want a full, relational SQL database in the browser?
You want to harness the raw power of C++ compiled to WebAssembly?
Awesome! But the setup is not for the faint of heart.
Introducing π₯ React Omni Store
β¨ Enter react-omni-store β¨
I created a set of beautiful hooks that wrap all this complexity in a warm, friendly, TypeScript-hugging blanket π§£.
1οΈβ£ useStorage β The Dependable Butler π§βπ³
This is your go-to for everyday tasks.
Handles both localStorage and sessionStorage with the same simple API.
β‘οΈ Automatically syncs state across tabs!
import { useStorage } from 'react-omni-store'
function UserGreeting() {
// Remembers the name across browser sessions!
const [name, setName] = useStorage('username', 'Guest');
// Remembers only for this session!
const [notes, setNotes] = useStorage('session-notes', '', 'sessionStorage');
return (
setName(e.target.value)}
/>
);
}
No more JSON.parse() rituals.
β¨ It. Just. Works. d(β’Μ v β’Μ d)
2οΈβ£ useIndexedDB β The Warehouse Manager ποΈ
When 5MB just won’t cut it.useIndexedDB gives you a simple key-value API on top of the mighty IndexedDB, without all the setup pain.
import { useIndexedDB } from 'react-omni-store';
function ThemeSwitcher() {
const [theme, setTheme] = useIndexedDB('ui-theme', 'light');
return (
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
</button>
);
}
β
Asynchronous
β
Persistent
β
Smooth as butter π§
3οΈβ£ useSQLiteDB β The βWe Have a Hulkβ Hook π§ π₯
This is where it gets wild.
Have you ever been writing a React component and thought:
“You know what this needs? SQL
JOINs.” π
With useSQLiteDB, you can spin up a full SQLite database in your browser using WebAssembly + sql.js, and run any SQL query you want!
Yes, you can now have foreign keys in your React state.
What a time to be alive. \ (β’β‘β’) /
import { useSQLiteDB } from 'react-omni-store';
function Notes() {
const { loading, error, execute, saveDatabase } = useSQLiteDB();
const addNote = async (content) => {
await execute("INSERT INTO notes (content) VALUES (?)", [content]);
await saveDatabase(); // Persist the change
};
if (loading) return "Firing up the flux capacitor...";
if (error) return "Oh no! Anyway...";
return (
// Your awesome, SQL-powered UI
);
}
π§ͺ Try the Demo App
I built a basic demo app to showcase everything:
β
To-do list
β
Theme switcher
β
Session-based greeting
β
SQLite-powered notes app
All living together in peace ποΈ
All powered by react-omni-store.
π¦ Get Started
NPM:
GitHub:
https://github.com/ADHILSHA/react-omni-store
β Like It? Fuel Future Projects!
If react-omni-store saves you from storage-induced headaches,
Consider buying me a coffee!
Β
