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!
javascript typescript angular localstorage pwa
Commentami!