ngforage

localforage bindings for Angular


NPM link

Build Status Coverage Status Greenkeeper badge Tested on Safari Tested on Chrome Tested on Firefox


Installation bash npm install localforage@^1.5.0 ngforage@^2.0.0 # for Angular 5 npm install localforage@^1.5.0 ngforage@^3.0.0 # for Angular 6
Basic Usage typescript import {NgForageModule, NgForageConfig} from 'ngforage'; @NgModule({ imports: [ // Optional in Angular 6 and up NgForageModule.forRoot(), // Optional configuration as an alternative to what's below in Angular 6+ NgForageModule.forRoot({ name: 'MyApp', driver: [ // defaults to indexedDB -> webSQL -> localStorage -> sessionStorage NgForageConfig.DRIVER_INDEXEDDB, NgForageConfig.DRIVER_LOCALSTORAGE ] }) ] }) export class AppModule{ public constructor(ngfConfig: NgForageConfig) { ngfConfig.configure({ name: 'MyApp', driver: [ // defaults to indexedDB -> webSQL -> localStorage -> sessionStorage NgForageConfig.DRIVER_INDEXEDDB, NgForageConfig.DRIVER_LOCALSTORAGE ] }); } } typescript import {NgForage, NgForageCache, NgForageConfig, 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 = NgForageConfig.DRIVER_SESSIONSTORAGE; } }
Store instances It is recommended to declare NgForage and/or NgForageCache in providers if you're not using the default configuration. The running configuration hash is used to create and reuse drivers (e.g. different IndexedDB databases), therefore setting it on a shared instance might have unintended side-effects.
Defining a Driver 1. Define a driver as described in the localForage docs 2. Plug it in, either directly through localForage or through NgForageConfig: typescript import {NgModule} from "@angular/core"; import {NgForageConfig, NgForageModule} from 'ngforage'; import localForage from 'localforage'; // Your driver definition const myDriver: LocalForageDriver = {/*...*/}; // Define it through localForage localForage.defineDriver(myDriver) .then(() => console.log('Defined!')) .catch(console.error); @NgModule({ imports: [ NgForageModule ] }) export class DemoModule { constructor(conf: NgForageConfig) { // Or through NgForageConfig conf.defineDriver(myDriver) .then(() => console.log('Defined!')) .catch(console.error); } }

results matching ""

    No results matching ""