Async PWA localStorage per Angular

Angular di default è già compatibile con il localStorage standard.

Ma esiste una libreria consigliata nel caso volessimo usare Angular per creare una PWA: @ngx-pwa/local-storage!

Per installare la libreria:

ng add @ngx-pwa/local-storage

A questo punto creiamo un service:

import {Injectable} from '@angular/core';
import {StorageMap} from '@ngx-pwa/local-storage';

@Injectable({
  providedIn: 'root'
})

export class TestServiceService {

  constructor(private storageMap: StorageMap) {
    let user: Object = {nome: 'Matte', cognome: 'Puffo'};

    this.storageMap.set('user', user).subscribe(() => {
      console.log('Utente aggiunto: ' + user);
    });

    this.storageMap.get('user').subscribe((user) => {
      console.log('----------');
      console.log(user);
    });

    this.storageMap.delete('user').subscribe(() => {
      console.log('----------');
      console.log('Utente cancellato: ' + user);
    });

    this.storageMap.get('test', {type: 'string'}).subscribe({
      next: (user) => {
        console.log('----------');
        console.log(user);
      },
      error: (error) => {
        console.log('----------');
        console.log('Valore non trovato');
      }
    });
  }

}

Alcune cose da dire:

• sarebbe meglio usare un custom type, e non un Object generico
• sarebbe meglio creare delle funzioni ad hoc per le varie operazioni, e non mettere tutto nel costruttore
• il next viene chiamato anche in caso di undefined
• l'error solo in caso di vero e proprio errore
• la librerie usa localstorage, e non è possibile fargli usare sessionStorage -> corretto in quanto nasce dall'idea di usarla per creare una PWA

Solo che qui stiamo vedendo giusto un esempio di test; vi lascio il compito di migliorare il codice!

A questo punto nel componente:

import {Component, OnInit} from '@angular/core';
import {TestServiceService} from './test-service.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor(private testSrv: TestServiceService) {}

  ngOnInit(): void {
  }

}

Enjoy!