Skip to main content

💾 AlpuraStorageViewModel – Guía de uso

AlpuraStorageViewModel es un servicio centralizado para gestionar el almacenamiento de datos en la aplicación. Proporciona una API unificada y sencilla para interactuar con diferentes mecanismos de almacenamiento del navegador:

  • Almacenamiento en memoria: Para datos volátiles que solo persisten mientras la aplicación está activa.
  • localStorage: Para datos que deben persistir entre sesiones del navegador.
  • sessionStorage: Para datos que deben persistir solo durante la sesión actual de la pestaña.
  • Cookies: Para pequeños fragmentos de datos.

El servicio implementa un patrón singleton para garantizar que haya una única fuente de verdad para el estado del almacenamiento en toda la aplicación.

💉 Inyección del Servicio​

AlpuraStorageViewModel se proporciona en el root de la aplicación, por lo que puede ser inyectado directamente en cualquier componente, directiva o servicio a través del constructor.

// En tu componente.ts o servicio.ts
import { AlpuraStorageViewModel, StorageEnum } from '@alpura/commons';

@Component({
  selector: 'app-perfil-usuario',
  template: `...`,
})
export class PerfilUsuarioComponent {
  constructor(private storageService: AlpuraStorageViewModel) {
    // Ahora puedes usar this.storageService para acceder a los métodos de almacenamiento.
  }

  guardarNombre(nombre: string) {
    this.storageService.setLocalStorage(StorageEnum.NOMBRE_USUARIO, nombre);
  }
}

🧠 Métodos Disponibles​

El ViewModel ofrece métodos claros y concisos para cada tipo de almacenamiento.

Almacenamiento en Memoria (Map)​

Ideal para datos temporales que no necesitan persistir si el usuario recarga la página.

// Guardar un objeto o valor en memoria
this.storageService.setStorageMap('configuracionTemporal', { theme: 'dark' });

// Recuperar el valor
const config = this.storageService.getStorageMap('configuracionTemporal');
console.log(config); // { theme: 'dark' }

localStorage​

Los datos guardados aquí permanecerán hasta que se borren explícitamente o el usuario limpie los datos de su navegador.

// Guardar el token de autenticación
this.storageService.setLocalStorage(StorageEnum.AUTH_TOKEN, 'un-token-muy-seguro');

// Recuperar el token
const token = this.storageService.getLocalStorage(StorageEnum.AUTH_TOKEN);

// Eliminar el token al cerrar sesión
this.storageService.deleteLocalStorage(StorageEnum.AUTH_TOKEN);

sessionStorage​

Similar a localStorage, pero los datos se eliminan automáticamente cuando se cierra la pestaña o el navegador.

// Guardar un ID de sesión temporal
this.storageService.setSessionStorage('idSesionActiva', 'xyz-123');

// Recuperar el ID
const idSesion = this.storageService.getSessionStorage('idSesionActiva');

// Eliminar el ID
this.storageService.deleteSessionStorage('idSesionActiva');

Cookies​

Útil para datos que necesitan ser leídos tanto por el cliente (JavaScript) como por el servidor.

// Crear una cookie que expira en 7 días
this.storageService.setCookie(StorageEnum.IDIOMA, 'es-MX', 7);

// Crear una cookie de sesión (sin fecha de expiración)
this.storageService.setCookie('preferencia-temporal', 'valor');

// Leer una cookie
const idioma = this.storageService.getCookie(StorageEnum.IDIOMA);

// Eliminar una cookie
this.storageService.deleteCookie(StorageEnum.IDIOMA);

🔑 El StorageEnum​

Para evitar errores tipográficos y mantener la consistencia, se recomienda encarecidamente utilizar el StorageEnum para todas las claves de almacenamiento persistente (localStorage, sessionStorage, cookies). Este enum proporciona un conjunto de claves predefinidas y ofuscadas para los datos más comunes de la aplicación.

import { StorageEnum } from '@alpura/commons';

// Uso correcto
this.storageService.setLocalStorage(StorageEnum.ID_USUARIO, '12345');

// Evitar esto (propenso a errores)
this.storageService.setLocalStorage('id_usuario', '12345');

🧩 Ejemplo de Integración Completa​

Este ejemplo muestra un servicio de autenticación que utiliza AlpuraStorageViewModel para gestionar los datos del usuario.

auth.service.ts​

import { Injectable } from '@angular/core';
import { AlpuraStorageViewModel, StorageEnum } from '@alpura/commons';

interface UserProfile {
  id: string;
  nombre: string;
  email: string;
  token: string;
}

@Injectable({
  providedIn: 'root',
})
export class AuthService {

  constructor(private storage: AlpuraStorageViewModel) {}

  login(userProfile: UserProfile) {
    // Guardar datos persistentes en localStorage
    this.storage.setLocalStorage(StorageEnum.AUTH_TOKEN, userProfile.token);
    this.storage.setLocalStorage(StorageEnum.ID_USUARIO, userProfile.id);
    this.storage.setLocalStorage(StorageEnum.NOMBRE_USUARIO, userProfile.nombre);
    this.storage.setLocalStorage(StorageEnum.EMAIL_USUARIO, userProfile.email);

    // Guardar un dato temporal en memoria
    this.storage.setStorage('loginTimestamp', new Date());

    console.log('Usuario ha iniciado sesión. Datos guardados.');
  }

  logout() {
    // Eliminar todos los datos del usuario de localStorage
    this.storage.deleteLocalStorage(StorageEnum.AUTH_TOKEN);
    this.storage.deleteLocalStorage(StorageEnum.ID_USUARIO);
    this.storage.deleteLocalStorage(StorageEnum.NOMBRE_USUARIO);
    this.storage.deleteLocalStorage(StorageEnum.EMAIL_USUARIO);

    // También se podría limpiar sessionStorage o cookies si fuera necesario
    console.log('Usuario ha cerrado sesión. Datos eliminados.');
  }

  isLoggedIn(): boolean {
    const token = this.storage.getLocalStorage(StorageEnum.AUTH_TOKEN);
    return !!token;
  }

  getUserName(): string {
    return this.storage.getLocalStorage(StorageEnum.NOMBRE_USUARIO);
  }
}

📬 Soporte​

Para dudas o mantenimiento del servicio AlpuraStorageViewModel, contactar al equipo de arquitectura.