ngforage is a fast and simple storage library for javascript. local forageΒ enhances the offline web application experience using asynchronous storage (IndexedDB or WebSQL) with a simple API that is similar to local storage.
localforage vs localstorage, localforage angular example, localforage nextjs angular, localforage with react
JavaScript Library Stores Form Data in Local Storage | form-storage
How to make use of it:
Installation:
ng add ngforage
Basic Usage
import {DEFAULT_CONFIG, NgForageOptions, NgForageConfig, Driver} from 'ngforage'; @NgModule({ providers: [ // One way of configuring ngForage { provide: DEFAULT_CONFIG, useValue: { name: 'MyApp', driver: [ // defaults to indexedDB -> webSQL -> localStorage Driver.INDEXED_DB, Driver.LOCAL_STORAGE ] } as NgForageOptions } ] }) export class AppModule{ // An alternative way of configuring ngforage public constructor(ngfConfig: NgForageConfig) { ngfConfig.configure({ name: 'MyApp', driver: [ // defaults to indexedDB -> webSQL -> localStorage Driver.INDEXED_DB, Driver.LOCAL_STORAGE ] }); } }
import {NgForage, Driver, NgForageCache, CachedItem} from 'ngforage'; @Component({ /* If you plan on making per-component config adjustments, add the services to the component's providers * to receive fresh instances; otherwise, skip the providers section. */ providers: [NgForage, NgForageCache] }) class SomeComponent implements OnInit { constructor(private readonly ngf: NgForage, private readonly cache: NgForageCache) {} public getItem<T = any>(key: string): Promise<T> { return this.ngf.getItem<T>(key); } public getCachedItem<T = any>(key: string): Promise<T | null> { return this.cache.getCached<T>(key) .then((r: CachedItem<T>) => { if (!r.hasData || r.expired) { return null; } return r.data; }) } public ngOnInit() { this.ngf.name = 'SomeStore'; this.cache.driver = Driver.LOCAL_STORAGE; } }
LocalForage Bindings For Angular, ngforage Plugin/Github
See Demo And Download
Official Website(Alorel): Click Here
This superior jQuery/javascript plugin is developed by Alorel. For extra advanced usage, please go to the official website.
Be First to Comment