https://github.com/beforesemicolon/client-web-storage
Powerful Web Application Data Storage and State Management Solution.
https://github.com/beforesemicolon/client-web-storage
clientdata indexeddb inmemory-db javascript localstorage memorystorage state-management storage websql webstorage
Last synced: about 1 year ago
JSON representation
Powerful Web Application Data Storage and State Management Solution.
- Host: GitHub
- URL: https://github.com/beforesemicolon/client-web-storage
- Owner: beforesemicolon
- License: mit
- Created: 2022-05-05T00:35:49.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-22T03:19:16.000Z (over 2 years ago)
- Last Synced: 2024-05-01T09:46:48.082Z (about 2 years ago)
- Topics: clientdata, indexeddb, inmemory-db, javascript, localstorage, memorystorage, state-management, storage, websql, webstorage
- Language: TypeScript
- Homepage:
- Size: 870 KB
- Stars: 28
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Client Web Storage
Powerful Web Application Data Storage and State Management Solution.
[](https://www.npmjs.com/package/client-web-storage)
- 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;
## Quick Example
```ts
// 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", {
$name: String,
description: "No Description",
complete: false
});
```
Works with any web library or framework. Here is an example using React.
```ts
// 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");
if(todos.processing) {
return
}
if(todos.error) {
return
{error.message}
}
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 (
<>
create todo
>
)
}
```
## Installation
### In Node Projects:
```bash
npm install client-web-storage
```
```js
import {Schema, ClientStore} from "client-web-storage";
```
### In the Browser
```html
```
```html
const {Schema, ClientStore} = window.CWS;
```
## Documentation
[Documentation](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/docs.md)
#### Application Examples
- [React](https://github.com/beforesemicolon/client-web-storage-project-examples/tree/main/react);
- [Angular](https://github.com/beforesemicolon/client-web-storage-project-examples/tree/main/angular);
[-- Check them All ---](https://github.com/beforesemicolon/client-web-storage-project-examples)
#### API References
- **[ClientStore](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/api-references/ClientStore.md)**
- **[Schema](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/api-references/Schema.md)**
- **[SchemaValue](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/api-references/SchemaValue.md)**