Integrando LocalStorage en Angular para almacenar datos

07/08/20230 comentarios

Hola a todos, hoy os voy a explicar como podemos utilizar localstorage en Angular.

En nuestras aplicaciones Angular, puedes que necesitamos almacenar datos de forma local en nuestro navegador.

Localstorage es de JavaScript, sino lo conocéis os dejo un tutorial donde lo tratamos.

JavaScript – Aprende a como utilizar Localstorage

Desde la página de MDN, tienes más in

Creación proyecto

Lo primero es crear un proyecto Angular, sino sabes como se hace, te dejo un tutorial aquí:

Crear y ejecutar un proyecto angular

Creación del modulo, pipe y servicio del localstorage

Vamos a crear todo lo necesario para el ejemplo.

Modulo:

$ ng g m localstorage

Pipe:

$ ng g p localstorage

Servicio:

$ ng g s localstorage

El contenido del modulo, debería ser así:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LocalstoragePipe } from './localstorage.pipe';
import { LocalstorageService } from './localstorage.service';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    LocalstoragePipe
  ],
  exports: [
    LocalstoragePipe
  ],
  providers: [
    LocalstorageService
  ]
})
export class LocalstorageModule { }

No te olvides importar este módulo en app.module.

LocalstorageService

Con este servicio interactuaremos directamente con la localstorage, obteniendo, seteando y limpiando datos.

Para hacerlo más reutilizable, podemos añadirle un prefijo, para evitar que se modifique la misma variable en diferentes apps. Veremos como iniciar ese prefijo más adelante.

Las operaciones serán las siguientes:

getItem: devuelve el valor por la clave del localstorage.
setItem: setea un valor de la localstorage por la clave. El valor debe ser un string, para objetos usar JSON.stringify.
clear: limpia todas las claves que empiecen por nuestro prefijo.
setPrefix: setea nuestro prefijo.

import { Injectable } from '@angular/core';

@Injectable()
export class LocalstorageService {

  private prefix: string;

  constructor() {
    this.prefix = '';
  }

  getItem(key: string) {
    return localStorage.getItem(this.prefix + key);
  }

  setItem(key: string, value: string) {
    return localStorage.setItem(this.prefix + key, value);
  }

  clear() {
    for (let key in localStorage) {
      if (key.startsWith(this.prefix)) {
        localStorage.removeItem(key);
      }
    }
  }

  setPrefix(prefix: string) {
    this.prefix = prefix;
  }
}

LocalstoragePipe

Con este pipe, podemos obtener el valor del localstorage desde HTML, veremos un ejemplo después.

Solo le tendremos que pasar la clave a la que queremos acceder.

import { Pipe, PipeTransform } from '@angular/core';
import { LocalstorageService } from './localstorage.service';

@Pipe({
  name: 'localstorage'
})
export class LocalstoragePipe implements PipeTransform {

  constructor(private localstorageService: LocalstorageService) { }

  transform(key: string): any {
    return this.localstorageService.getItem(key);
  }
}

Iniciar prefix de nuestro localstorage

Como hemos comentado, tenemos un prefijo que tenemos que setear, lo podemos hacer en nuestro app.module.

Para ello, necesitamos colocar en nuestro app.module una función que setee el prefijo.

export function storageFactory(provider: LocalstorageService) {
  return () => provider.setPrefix('test-storage:');
}

Y en providers, añadiremos lo siguiente:

{
  provide: APP_INITIALIZER,
  useFactory: storageFactory,
  deps: [LocalstorageService],
  multi: true,
}

Quedando así:

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LocalstorageModule } from './localstorage/localstorage.module';
import { LocalstorageService } from './localstorage/localstorage.service';

export function storageFactory(provider: LocalstorageService) {
  return () => provider.setPrefix('test-storage:');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LocalstorageModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: storageFactory,
      deps: [LocalstorageService],
      multi: true,
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

APP_INITIALIZER se inicializa al arrancar la aplicación.

En este ejemplo, nuestro prefijo será «test-storage:» pero ¡elige el que quieras!

Probando nuestro localstorage

En el fichero app.component.ts, inyectaremos el localstorageService y setearemos algunos valores:

import { Component } from '@angular/core';
import { LocalstorageService } from './localstorage/localstorage.service';

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

  constructor(private localstorage: LocalstorageService) {
    this.localstorage.setItem('clave1', 'Hola');
    this.localstorage.setItem('clave2', 'Mundo');
    this.localstorage.setItem('clave3', `${10}`);
    this.localstorage.setItem('clave4', JSON.stringify({ 'prop1': 'value1' }));
  }

}

En el app.component.html, vamos a llamar a nuestro pipe.

</pre>
<div>{{'clave1' | localstorage}}</div>
<div>{{'clave2' | localstorage}}</div>
<div>{{'clave3' | localstorage}}</div>
<div>{{'clave4' | localstorage}}</div>
<pre>

Este es el resultado: