@aegis-techno/ngx-local-storage

An Angular wrapper for local storage access.

Usage no npm install needed!

<script type="module">
  import aegisTechnoNgxLocalStorage from 'https://cdn.skypack.dev/@aegis-techno/ngx-local-storage';
</script>

README

ngx-local-storage

An Angular wrapper for local storage access.

Installation

Install via npm:

npm install @aegis-techno/ngx-local-storage --save

Install manually:

  • Add @aegis-techno/ngx-local-storage into package.json.
  • Run npm install.
  • Import NgxLocalStorageModule.forRoot() into the root module of your default application (or defining a project by using the --project <PROJECT_NAME> and/or --module <MODULE_PATH> CLI parameters).

Usage

1. Import NgxLocalStorageModule

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgxLocalStorageModule} from '@aegis-techno/ngx-local-storage';

@NgModule({
    imports: [
        BrowserModule,
        NgxLocalStorageModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Configuration (NgxLocalStorageModule.forRoot(moduleConfig))
  • prefix
    • Type: string?
    • Determines the key prefix.
    • Default: null
  • allowNull
    • Type: boolean
    • Determines if null | 'null' values should be stored.
    • Default: true

Serialization

Default serialization

The library utilizes the JSON.stringify()/JSON.parse() mechanics to pass values (of any type) to and from localstorage per default. If you wish you can override that behaviour by injecting your own custom serializer (app wide) or pass one per stoage call.

App wide serializer

Inject your custom serializer implentation using the provided injection token:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NgxLocalStorageModule, NGX_LOCAL_STORAGE_SERIALIZER} from 'ngx-localstorage';

@NgModule({
    imports: [
        BrowserModule,
        NgxLocalStorageModule.forRoot()
    ],
    bootstrap: [AppComponent],
    providers: [
      {
        provide: NGX_LOCAL_STORAGE_SERIALIZER,
        useClass: <custom serializer implementing StorageSerializer>
      }
    ]
})
export class AppModule { }
Per call serializer

Every set()/get call on NgxLocalStorageService supports to pass an optional (de)seriaizer. If none is provided the app wide (or default) one is used.

API

LocalStorageService

Methods

  • count(): number: Gets the number of entries in the applications local storage.
  • getKey(index: number): string | null: Returns the nth (defined by the index parameter) key in the storage. The order of keys is user-agent defined, so you should not rely on it.
  • set(key: string, value: string, prefixOrSerilizer?: string | StorageSerializer): void: Adds tha value with the given key or updates an existing entry using either the provided or default serializer (check method overloads).
  • get(key: string, prefixOrSerilizer?: string | StorageSerializer): string | null: Gets the entry specified by the given key or null using either the provided or default serializer (check method overloads).
  • remove(key: string, prefix?: string): void: Removes the entry specified by the given key.
  • clear(): void: Clears all entries of the applications local storage.
Example
import {LocalStorageService} from '@aegis-techno/ngx-local-storage';

@Component({
  selector: 'app-storage-access',
  template: './storage-access.component.html'
})
export class StorageAccessComponent implements OnInit {

  constructor(private _storageService: NgxLocalStorageService) {
  }
  
  ngOnInit(): void {
    console.log('Entries count: ', this._storageService.count())
  }
}