Local Forage Bindings for Angular | ngforage

local-forage-binding-angular

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

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.