kv-storage icon indicating copy to clipboard operation
kv-storage copied to clipboard

A couple more libraries to investigate/ask for feedback from

Open domenic opened this issue 7 years ago • 4 comments
trafficstars

Mentioned to me by a colleague over lunch:

  • lawnchair.js
  • React Native's own async local storage

domenic avatar Mar 04 '18 13:03 domenic

Oh, and I found https://github.com/w3c/IndexedDB/issues/91.

Right now I consider this blocked on #18.

domenic avatar Mar 12 '18 06:03 domenic

As the author of @ngx-pwa/local-storage, which main goal is the same as this proposal, and is currently the main Angular lib used for this purpose, I'm interested to stay in touch about this.

cyrilletuzi avatar Mar 01 '19 15:03 cyrilletuzi

I also wrote a wrapper for IndexedDB for the same reasons as this proposal. Similar API and promise-based so you can use it in an async function with await. I'll gladly deprecate it once this ships. https://github.com/composi/idb

rbiggs avatar Jul 07 '19 13:07 rbiggs

Hi all, I wanted to introduce you to the library I created wora/cache-persist. I used to persist Relay & Apollo GraphQL caches:

In short, wora/cache-persist is an object that allows you to manage interfacing with storage (localStorage, sessionStorage, indexedDB, React-Native AsyncStorage & any custom storage) in "synchronous" mode and with the possibility of serializing and deserialization of keys and values ​​in storage (used to filter keys, encription, compression ...)

This result is achieved by combining:

  • the initial restore of data persisted in an inmemory object (this is asynchronous, so either you perform the await on restore or perform the reconciliation between the initial state and the persistent state)
  • after restore, data is read and written synchronously in the inmemory object (optimizes performance)
  • each mutation of the object in memory is inserted in a queue managed asynchronously (the storage update interval is configurable, throttle default 500ms)
  • at the end of the interval a merge of the mutations is made in order to avoid repeated writing
  • the writes are grouped and the multiSet function of the storage is invoked (better performance if this function is natively implemented as for React-Native AsyncStorage)
  • removals are grouped and the storage multiRemove function is invoked (better performance if this function is natively implemented as for React-Native AsyncStorage)

If you need to be sure that the data is written into the storage you can use the flush function.

While to handle any errors that may occur during asynchronous writing, there is a callback errorHandling function as a Cache configuration parameter.

export interface ICache {
    isRehydrated(): boolean;
    restore(): Promise<DataCache>;
    flush(): Promise<void>;
    getState(): Readonly<{ [key: string]: any }>;
    get(key: string): any;
    getAllKeys(): Array<string>;
    has(key: string): boolean;
    set(key: string, value: any): void;
    delete(key: string): void;
    remove(key: string): void;
    purge(): void;
    replace(data: any): void;
    subscribe(callback: (state: any, action: any) => void): () => void;
    notify(payload?: { state?: any; action?: any }): void;
    getStorage(): ICacheStorage;
}

export type CacheOptions = {
    serialize?: boolean;
    prefix?: string | undefined | null;
    initialState?: DataCache;
    mergeState?: (restoredState?: DataCache, initialState?: DataCache) => Promise<DataCache> | DataCache;
    mutateKeys?: Array<IMutateKey>;
    mutateValues?: Array<IMutateValue>;
    storage?: ICacheStorage;
    webStorage?: 'local' | 'session';
    disablePersist?: boolean;
    errorHandling?: (cache: ICache, error: any) => boolean;
    throttle?: number;
};

The size of the library is about 2kb. (can be improved)

I would like to have your feedback Thanks

morrys avatar Dec 19 '19 13:12 morrys