angular-forage

A Angular service module for localForage

Installation

Simply install the npm package angular-forage:

NPM

npm i localforage object-path angular-forage

YARN

yarn add localforage object-path angular-forage

Using angular-forage

In your main app module file (eg. app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AngularForageModule } from 'angular-forage';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AngularForageModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

In your components:

import { Component, OnInit } from '@angular/core';
import { AngularForage } from 'angular-forage';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private af: AngularForage) {
    this.af.setLocalStorageDriver();
    // this.af.setIndexedDBDriver();
    // this.af.setWebSQLDriver();

    this.af.config({
        name: 'angular-forage'
    });
  }

  ngOnInit() {
    // SET ITEM
    // this.af.setItem('key', 'value');

    this.af.setItem('app', 'Angular Forage');
    // or
    this.af.setItem('app', { app: 'Angular Forage', version: '1.0.0', author: { name: 'John Doe', email: '[email protected]' }});

    // GET ITEM
    // this.af.getItem('key'');
    this.af.getItem('app');

    // REMOVE ITEM
    // this.af.removeItem('key'');
    // this.af.removeItem('app');

    // this.af.clear(); // delete everything

    // Forage will stringify/parse the json object automatically.
    }
}

All the methods will return promise. Use .then() and .catch() whereever you need.

• Please refer to localForage documentation for more info, you can view the localForage Docs at https://localforage.github.io/localForage

Default Driver

By default, localForage selects backend drivers for the datastore in this order:

1. IndexedDB localforage.INDEXEDDB
2. WebSQL localforage.WEBSQL
3. localStorage localforage.LOCALSTORAGE

If you would like to force usage of a particular driver then set driver as this.af.setLocalStorageDriver(); this.af.setIndexedDBDriver(); this.af.setWebSQLDriver();

API will work same as localForage in your app with this.af, only the json has been added to update json objects easily.

You can use . notation for json object, if you need to update the version in above app code then you can simple

this.af.json('app.version', '1.0.1');

and to update author name

this.af.json('app.author.name', 'Mian Saleem');

json will resolve with main object, in above example code .then(value => console.log(value)) will log the updated app object.

Contributing

Any sort of contributions and feedback is much appreciated. Just leave an issue or pull-request!