Powerful Web Application Data Storage and State Management Solution.
- Same simple API for IndexedDB, LocalStorage, WebSQL, and in-memory data storage;
- Event driven and asynchronous;
- Automatic data validation done at the store level - Guarantees that all data fields are of the right type and exists with configurable automatic defaults;
- No actions or reducers setup needed - The easiest store to configure ever;
- Easy setup for Client-Server data synchronization using interceptors;
- NOT UI framework specific! Works with any UI Framework (React, Angular, VueJs, etc) - Take your storage setup with you when you migrate to a different framework and eliminate the need to learn a new state management solution for your app.
- Easy to maintain and perform all data logic and fetching away from your components - Keep data concerns away from UI side of your app;
- Highly and easily configurable;
- Easy to tap into any store events to perform side effect logic;
// todo.store.ts
import {ClientStore} from "client-web-storage";
interface ToDo {
name: string;
description: string;
complete: boolean;
}
// create a store providing the name and schema object
// with default values or javasctipt types
const todoStore = new ClientStore<ToDo>("todo", {
$name: String,
description: "No Description",
complete: false
});Works with any web library or framework. Here is an example using React.
// app.tsx
import {useClientStore} from "client-web-storage/helpers/use-client-store";
import {Todo} from "./stores/todo.store";
import FlatList from "flatlist-react";
const App = () => {
const todos = useClientStore<Todo>("todo");
if(todos.processing) {
return <Spinner />
}
if(todos.error) {
return <p className="error">{error.message}</p>
}
const handleCreatItem = async () => {
await todos.createItem({
// only name is required (marked with $), the store will auto fill the other fields with defaults
name: "Go to Gym"
});
}
return (
<>
<button type="button" onClick={handleCreatItem}>create todo</button>
<FlatList list={todos.items} renderItem={renderTodo}/>
</>
)
}npm install client-web-storageimport {Schema, ClientStore} from "client-web-storage";<!-- use the latest version -->
<script src="https://unpkg.com/client-web-storage/client-web-storage.min.js"></script>
<!-- use a specific version -->
<script src="https://unpkg.com/client-web-storage@1.7.5/client-web-storage.min.js"></script><script>
const {Schema, ClientStore} = window.CWS;
</script>