Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/e-oz/ngx-reactive-storage
https://github.com/e-oz/ngx-reactive-storage
Last synced: 23 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/e-oz/ngx-reactive-storage
- Owner: e-oz
- Created: 2023-08-12T16:11:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-02T18:12:03.000Z (about 1 month ago)
- Last Synced: 2024-11-17T12:15:12.005Z (25 days ago)
- Language: TypeScript
- Size: 2.23 MB
- Stars: 40
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-angular - ngx-reactive-storage - Wrapper around IndexedDB and localStorage that allows you to create databases and tables using a simple, promise-based API. Changes to the data can be seen with Angular Signals or RxJS Observables. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-reactive-storage - Wrapper around IndexedDB and localStorage that allows you to create databases and tables using a simple, promise-based API. Changes to the data can be seen with Angular Signals or RxJS Observables. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-reactive-storage - Wrapper around IndexedDB and localStorage that allows you to create databases and tables using a simple, promise-based API. Changes to the data can be seen with Angular Signals or RxJS Observables. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-reactive-storage - Wrapper around IndexedDB and localStorage that allows you to create databases and tables using a simple, promise-based API. Changes to the data can be seen with Angular Signals or RxJS Observables. (Table of contents / Third Party Components)
README
Reactive Storage
===============
Wrapper around [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
Allows to create databases and tables in both of them using a simple API.
Modifications of the data can be observed using RxJS Observables or Angular Signals.
> [!IMPORTANT]
> While observing a specific key, you will receive notifications about changes made not only in the current instance of the application but also in other tabs or windows.
> It opens a lot of interesting opportunities for data synchronization across tabs and windows.
Observables and signals will be created only upon demand, ensuring that no resources are wasted for keys that are not being observed.
## Uses
✳️ Angular v16+ (Signals)
✳️ RxJS v7+ (Observables)
✳️ localForage (IndexedDB)
## Installation
[npm](https://www.npmjs.com/package/ngx-reactive-storage):
```bash
npm i ngx-reactive-storage
```
Yarn:
```bash
yarn add ngx-reactive-storage
```
## Usage
```ts
import { RxStorage } from "ngx-reactive-storage";
const storage = new RxStorage();
storage.set('hello', 'world!');
```
API
===
```ts
export type ReactiveStorage = {
/**
* Returns value by the key
*/
get(key: string): Promise;
/**
* Returns a hot observable (replay:1) and pushes the current value for this key.
* Future modifications will be pushed to the returned observable.
*
* If localStorage is being used as the storage, the value will be pushed synchronously
* (to allow you to read it synchronously or asynchronously).
*/
getObservable(key: string): Observable;
/**
* Returns a signal with the current value for this key.
* The key becomes "observed" and future modifications will be
* written to the returned signal.
*
* If localStorage is being used as the storage, the value will be pushed synchronously.
*/
getSignal(key: string, options?: SignalOptions): Signal;
/**
* Returns a signal with the current value for this key.
* The key becomes "observed" and future modifications will be
* written to the returned signal.
*
* The usage of the `set()` and `update()` methods of this signal will also update the storage key.
*
* If localStorage is being used as the storage, the value will be pushed synchronously.
*/
getWritableSignal(key: string, options?: SignalOptions): WritableSignal;
/**
* Set a key-value pair
*/
set(key: string, value: unknown): Promise;
/**
* Removes a key
*/
remove(key: string): Promise;
/**
* Returns keys of the current table (located in the current database).
*/
getKeys(): Promise;
/**
* Removes all keys of the current table (located in the current database).
*/
clear(): Promise;
/**
* Removes links to observables and signals; removes event listeners.
*/
dispose(): void;
}
```
https://user-images.githubusercontent.com/526352/284077145-51b438e0-e0e7-416d-b38d-d55449983793.mov
## What storage to use
The recommended storage is **IndexedDB**, because it:
1. Is supported by every browser alive;
2. Gives you gigabytes of space (60% of the disk in Chrome, 10 Gb in Firefox, [etc.](https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria#other_web_technologies));
3. Has native separation by databases and tables.
**localStorage** is limited to just 5 Mb of space, but sometimes you need to read some data synchronously before you render something.
Using this library, you can use all the nice additions, one API for both types of storages, and still read from localStorage synchronously when needed, using observables or signals.
Example:
```ts
import { RxLocalStorage } from "ngx-reactive-storage";
const storage = new RxLocalStorage('settings', 'db1');
const colorScheme = storage.getSignal('color-scheme')();
```
## Supported browsers
* Chrome: v54+
* Edge: v79+
* Firefox: v38+
* Safari: v15.4+
* Opera: v41+
* Chrome for Android: v115+
* Firefox for Android: v115+
* Safari iOS: v15.4+