pri-ng-warehouse

Angular warehouse module to store data in browser store (indexedDB, localstorage, websql, localstorage, inmemory)

Usage no npm install needed!

<script type="module">
  import priNgWarehouse from 'https://cdn.skypack.dev/pri-ng-warehouse';
</script>

README

Warehouse: pri-ng-warehouse

Simple API to access browser storage's. (IndexedDB, LocalStorage, WebSql, InMemory)

Angular >= 9: version >= 2.x

Angular < 9: version < 2.x

  • Simple API
  • Same API for different storage types
  • Storage types: indexedDB, websql, localstorage, inmemory
  • Fallback to supported storage type if configured storage is not available
  • Use multiple storages at the same time
  • Compatible with SSR

Table of Contents

More

Installation

NPM

npm install --save pri-ng-warehouse localforage

Usage

Import PriWarehouseModule in your root module.

import { PriWarehouseModule } from 'pri-ng-warehouse';

@NgModule({
  imports: [
    PriWarehouseModule.configure()
  ]
})

Inject and use PriWarehouseService


@Component({ ... })
export class MyComponent {
 constructor(private warehouse: PriWarehouseService) {}
 
 writeToStorage() {
  this.warehouse.set('storage-key', 'my value').then(_ => {
    console.log('value written to storage');
  });
 }
 
 readFromStorage() {
  this.warehouse.get('storage-key').then(value => {
      console.log('value from storage: ', value);
    }); 
 }
}

Configuration

PriWarehouseConfig

possibility to customize your warehouse configuration

or use multiple warehouses, each needs his own configuration

  • [driver]: DRIVER_TYPE ('default', 'indexeddb', 'websql', 'localstorage', 'inMemory')

    defines your preferred storage type. If this type is default it will automatically use the first available type.

    be careful when defining a specific type, not every browser supports all types

  • [name]: string

    the warehouse name

  • [version]: string

    warehouse version

  • [warehouseId]: string

    if you are using multiple warehouses in your application this id need to be a unique for each warehouse. (only effects the internal storage key)

  • [storageName]: string

    storage name (only effects the internal storage key)

  • [description]: string

    description

Configuration usage

i.e. use multiple warehouses in one application

const FIRST_WAREHOUSE_CONFIG: PriWarehouseConfig = {
 ...
}
const SECOND_WAREHOUSE_CONFIG: PriWarehouseConfig = {
 ...
}

@NgModule({
  imports: [
    PriWarehouseModule.configure([FIRST_WAREHOUSE_CONFIG, SECOND_WAREHOUSE_CONFIG])
  ]
})

If you are using multiple warehouses or a custom configuration you need to add the warehouseId when accessing the warehouse.

i.e.

this.warehouse.set('storage-key', 'my value', 'your-warehouse-id')
this.warehouse.get('storage-key', 'your-warehouse-id')

PriWarehouseService

Methods

  • get(key: string, warehouseId?: string)

    Gets an item from the storage. If the key does not exist, getItem() will return null.

    Even if there isn't a value stored, null will be returned

  • getJson(key: string, warehouseId?: string)

    get javascript object to store (object must be serializable)

  • set(key: string, value: any, warehouseId?: string)

    Saves a value to the store, the following types are allowed:

    Array, ArrayBuffer, Blob, Float32Array, Float64Array, Int8Array, Int16Array, Int32Array, Number, Object, Uint8Array, Uint8ClampedArray, Uint16Array, Uint32Array, String

  • setJson(key: string, value: any, warehouseId?: string)

    set javascript object to store (object must be serializable)

  • remove(key: string, warehouseId?: string)

    Removes from the store

  • destroy(warehouseId?: string)

    Removes every key from the store

  • count(warehouseId?: string)

    Returns the number of stored entries

  • hasKey(key: string, warehouseId?: string)

    Return if a storage entry with the given key exists

  • keys(warehouseId?: string)

    Returns all keys from the storage

  • getWarehouseSystemInfo()

    Returns a system information which storages are available, the storage size and usage (if supported)

Development

This project uses the Angular CLI for building the library

$ npm run build:lib
$ npm run start

or if you want to get live updates on lib source changes

Terminal 1:

$ npm run start:lib

Terminal 2:

$ npm run start

Issues

If you identify any errors in the library, or have an idea for an improvement, please open an issue.

Planned

  • add unit tests
  • add IE 11 support for demo app even if i dont know how IE is still alive

Author

Credit

More Stuff