Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ngforage with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. require("localforage/package.json"); // localforage is a peer dependency. var ngforage = require("ngforage")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ngforage v5.0.1

localForage bindings for Angular

ngforage

localforage bindings for Angular


NPM link

Build Status Coverage Status Greenkeeper badge


Installation

 npm install localforage@^1.5.0 ngforage@^5.0.0 # for Angular 8
 npm install localforage@^1.5.0 ngforage@^4.0.0 # for Angular 7
 npm install localforage@^1.5.0 ngforage@^3.0.0 # for Angular 6
 npm install localforage@^1.5.0 ngforage@^2.0.0 # for Angular 5

Alternatively, you can replace the following ngforage versions with a dist tag:

npm install ngforage@ng7
npm install ngforage@ng6
npm install ngforage@ng5

Basic Usage

  import {NgForageModule, NgForageConfig, Driver} 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
          Driver.INDEXED_DB,
          Driver.LOCAL_STORAGE
        ]
      })
    ]
  })
  export class AppModule{
    public constructor(ngfConfig: NgForageConfig) {
      ngfConfig.configure({
        name: 'MyApp',
        driver: [ // defaults to indexedDB -> webSQL -> localStorage
          Driver.INDEXED_DB,
          Driver.LOCAL_STORAGE
        ]
      });
    }
  }
  import {NgForage, Driver, 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 = Driver.LOCAL_STORAGE;
    }
  }

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:
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);
  }
}

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free