El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos cómo almacenar datos localmente en una aplicación Ionic. Esto es crucial para aplicaciones que necesitan funcionar sin conexión a internet o que requieren guardar datos de usuario de manera persistente.

Conceptos Clave

Almacenamiento Local: Guardar datos en el dispositivo del usuario.
Tipos de Almacenamiento:
- LocalStorage: Almacenamiento simple basado en clave-valor.
- SessionStorage: Similar a LocalStorage, pero los datos se eliminan cuando se cierra la sesión del navegador.
- IndexedDB: Base de datos más compleja y robusta.
- SQLite: Base de datos SQL ligera, ideal para aplicaciones móviles.

Comparación de Métodos de Almacenamiento

Método	Persistencia	Capacidad	Complejidad	Sincronización
LocalStorage	Permanente	5-10 MB	Baja	No
SessionStorage	Temporal	5-10 MB	Baja	No
IndexedDB	Permanente	Ilimitada	Alta	No
SQLite	Permanente	Ilimitada	Media	No

Usando LocalStorage en Ionic

Ejemplo Práctico

Vamos a ver cómo usar LocalStorage para almacenar y recuperar datos en una aplicación Ionic.

Guardar Datos en LocalStorage:

// Guardar un valor en LocalStorage
localStorage.setItem('nombreUsuario', 'Juan Pérez');

Recuperar Datos de LocalStorage:

// Recuperar un valor de LocalStorage
const nombreUsuario = localStorage.getItem('nombreUsuario');
console.log(nombreUsuario); // Salida: Juan Pérez

Eliminar Datos de LocalStorage:

// Eliminar un valor de LocalStorage
localStorage.removeItem('nombreUsuario');

Limpiar Todo el LocalStorage:

// Limpiar todos los datos de LocalStorage
localStorage.clear();

Ejercicio Práctico

Objetivo: Crear una página en Ionic que permita al usuario guardar su nombre y mostrarlo en la pantalla.

Crear la Página:

ionic generate page UserProfile

Modificar el HTML (user-profile.page.html):

<ion-header>
  <ion-toolbar>
    <ion-title>Perfil de Usuario</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-label position="floating">Nombre</ion-label>
    <ion-input [(ngModel)]="nombre"></ion-input>
  </ion-item>
  <ion-button expand="full" (click)="guardarNombre()">Guardar Nombre</ion-button>
  <ion-item *ngIf="nombreGuardado">
    <ion-label>Nombre Guardado: {{ nombreGuardado }}</ion-label>
  </ion-item>
</ion-content>

Modificar el TypeScript (user-profile.page.ts):

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.page.html',
  styleUrls: ['./user-profile.page.scss'],
})
export class UserProfilePage implements OnInit {
  nombre: string;
  nombreGuardado: string;

  constructor() { }

  ngOnInit() {
    this.nombreGuardado = localStorage.getItem('nombreUsuario');
  }

  guardarNombre() {
    localStorage.setItem('nombreUsuario', this.nombre);
    this.nombreGuardado = this.nombre;
  }
}

Solución del Ejercicio

Al completar el ejercicio, deberías tener una página funcional que permita al usuario ingresar su nombre, guardarlo en LocalStorage y mostrarlo en la pantalla.

Retroalimentación y Consejos

Errores Comunes:
- No verificar si el valor recuperado de LocalStorage es null antes de usarlo.
- Olvidar actualizar la vista después de guardar un valor en LocalStorage.
Consejos:
- Siempre maneja los posibles errores al trabajar con almacenamiento local.
- Considera usar servicios para manejar el almacenamiento de datos, lo que facilita la reutilización y el mantenimiento del código.

Conclusión

En esta sección, hemos aprendido cómo almacenar datos localmente utilizando LocalStorage en una aplicación Ionic. Este conocimiento es fundamental para crear aplicaciones que puedan funcionar sin conexión y mantener datos de usuario de manera persistente. En el próximo tema, exploraremos cómo usar Ionic Storage para una solución de almacenamiento más robusta y flexible.

Almacenando Datos Localmente

Conceptos Clave

Comparación de Métodos de Almacenamiento

Usando LocalStorage en Ionic

Ejemplo Práctico

Ejercicio Práctico

Solución del Ejercicio

Retroalimentación y Consejos

Conclusión

Curso de Desarrollo con Ionic

Módulo 1: Introducción a Ionic

Módulo 2: Componentes Básicos y Navegación

Módulo 3: Estilización y Tematización

Módulo 4: Trabajando con Datos

Módulo 5: Componentes y Funcionalidades Avanzadas

Módulo 6: Pruebas y Despliegue

Módulo 7: Temas Avanzados