Ngx-localforage NPM

ngx-localforage

ngx-localforage is a library that provides Angular4+ abstraction to the localforage API, providing typescript definitions and returning rxjs/Observable streams as a result to your queries.

Installation

To install this library, run:

$ npm install ngx-localforage --save

In your application's NgModule add LocalForageModule to the imports section.

// ...
imports: [
  // ...
  LocalForageModule.forRoot()
]

Usage

To use the library simply import the LocalForageService to your component, and use one of the provided methods.

import { Component } from '@angular/core';
import { LocalForageService } from 'ngx-localforage';
//...

export MyComponent implements OnInit {
  constructor ( private localforage: LocalForageService) { }

  ngOnInit() {
    this.localforage.keys().subscribe(keys => {
      console.log(keys);
    });
  }
}

Methods

All of the localforage methods that are available in the localforage API are available in this library. Methods include:

getItem(key: string): Observable<any> - Localforage Docs
setItem(key: string, item: any): Observable<any> - Localforage Docs
removeItem(key: string): Observable<any> - Localforage Docs
clear(): Observable<any> - Localforage Docs
length(): Observable<number> - Localforage Docs
key(index: number): Observable<string> - Localforage Docs
keys(key: string): Observable<string[]> - Localforage Docs

Localforage Config

A config(config: LocalForageConfiguration) method in the LocalForageService exists, as well as a and LocalForageConfiguration type interface exists to configure localforage as is provided in the localforage API. Note: The config method needs to be run before any other localforage calls Example, put it in the initialization of your app.component.ts:

import { LocalForageService, LocalForageConfiguration } from 'ngx-localforage';

//...

export class AppComponent implements OnInit {

  constructor ( private localforage: LocalForageService) { }

  ngOnInit() {
    const config: LocalForageConfiguration = {
      name: 'myApp',
      storeName: 'app',
      description: 'my description'
    }
    this.localforage.config(config).subscribe(() => {
      console.log('Localforage configured :D');
    })
    .catch(err => console.error('Error configuring localforage', err));
  }
}

Should you want to choose a driver, you'll need to access localforage variable in the window's global scope like so: driver: window['localforage']['INDEXDB'], or you can use the profided localforageFactory and LocalForageToken to provide localforage in your app's module (see localforage.module.ts in the src/ directory for an example of how to do this).