El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Usando Ionic Storage

Siguiente ►
►

Introducción

Ionic Storage es una solución de almacenamiento simple y potente para aplicaciones Ionic. Permite almacenar datos clave-valor de manera persistente en el dispositivo del usuario. Ionic Storage es compatible con múltiples motores de almacenamiento, como IndexedDB, SQLite y LocalStorage, lo que garantiza que los datos se almacenen de manera eficiente y segura en diferentes plataformas.

Objetivos

  • Entender qué es Ionic Storage y sus beneficios.
  • Aprender a instalar y configurar Ionic Storage en una aplicación Ionic.
  • Conocer las operaciones básicas de almacenamiento: guardar, recuperar y eliminar datos.
  • Implementar ejemplos prácticos de uso de Ionic Storage.

Instalación y Configuración

Paso 1: Instalación

Para comenzar a usar Ionic Storage, primero debemos instalar el paquete @ionic/storage-angular y el paquete @ionic/storage:

npm install @ionic/storage-angular @ionic/storage

Paso 2: Configuración

Después de la instalación, debemos configurar Ionic Storage en nuestro proyecto. Abre el archivo app.module.ts y añade las siguientes importaciones y configuraciones:

import { IonicStorageModule } from '@ionic/storage-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    IonicStorageModule.forRoot() // Configuración de Ionic Storage
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Uso Básico de Ionic Storage

Inicialización del Storage

Antes de usar Ionic Storage, debemos inicializarlo. Esto se hace generalmente en el constructor de un servicio o componente. Aquí hay un ejemplo de cómo hacerlo en un servicio:

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private _storage: Storage | null = null;

  constructor(private storage: Storage) {
    this.init();
  }

  async init() {
    // Inicializa el almacenamiento
    const storage = await this.storage.create();
    this._storage = storage;
  }
}

Guardar Datos

Para guardar datos en Ionic Storage, usamos el método set. Aquí hay un ejemplo de cómo guardar un valor:

async setItem(key: string, value: any) {
  await this._storage?.set(key, value);
}

Recuperar Datos

Para recuperar datos, usamos el método get. Aquí hay un ejemplo de cómo recuperar un valor:

async getItem(key: string): Promise<any> {
  return await this._storage?.get(key);
}

Eliminar Datos

Para eliminar datos, usamos el método remove. Aquí hay un ejemplo de cómo eliminar un valor:

async removeItem(key: string) {
  await this._storage?.remove(key);
}

Ejemplo Completo

A continuación, se muestra un ejemplo completo de un servicio que utiliza Ionic Storage para guardar, recuperar y eliminar datos:

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private _storage: Storage | null = null;

  constructor(private storage: Storage) {
    this.init();
  }

  async init() {
    const storage = await this.storage.create();
    this._storage = storage;
  }

  async setItem(key: string, value: any) {
    await this._storage?.set(key, value);
  }

  async getItem(key: string): Promise<any> {
    return await this._storage?.get(key);
  }

  async removeItem(key: string) {
    await this._storage?.remove(key);
  }
}

Ejercicio Práctico

Descripción del Ejercicio

Crea una aplicación Ionic que permita a los usuarios guardar, recuperar y eliminar notas. La aplicación debe tener una interfaz simple con un campo de texto para ingresar la nota y tres botones: "Guardar Nota", "Recuperar Nota" y "Eliminar Nota".

Solución

Paso 1: Crear la Interfaz de Usuario

En el archivo home.page.html, crea la interfaz de usuario:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Storage Example
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-label position="floating">Nota</ion-label>
    <ion-input [(ngModel)]="note"></ion-input>
  </ion-item>
  <ion-button expand="full" (click)="saveNote()">Guardar Nota</ion-button>
  <ion-button expand="full" (click)="loadNote()">Recuperar Nota</ion-button>
  <ion-button expand="full" (click)="deleteNote()">Eliminar Nota</ion-button>
  <ion-text *ngIf="retrievedNote">{{ retrievedNote }}</ion-text>
</ion-content>

Paso 2: Implementar la Lógica en el Componente

En el archivo home.page.ts, implementa la lógica para guardar, recuperar y eliminar notas:

import { Component } from '@angular/core';
import { DataService } from '../services/data.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  note: string;
  retrievedNote: string;

  constructor(private dataService: DataService) {}

  async saveNote() {
    await this.dataService.setItem('note', this.note);
  }

  async loadNote() {
    this.retrievedNote = await this.dataService.getItem('note');
  }

  async deleteNote() {
    await this.dataService.removeItem('note');
    this.retrievedNote = '';
  }
}

Conclusión

En esta sección, hemos aprendido a usar Ionic Storage para almacenar datos de manera persistente en una aplicación Ionic. Hemos cubierto la instalación y configuración de Ionic Storage, así como las operaciones básicas de almacenamiento: guardar, recuperar y eliminar datos. Además, hemos implementado un ejemplo práctico para reforzar los conceptos aprendidos.

En el próximo módulo, exploraremos cómo trabajar con datos de manera más avanzada, incluyendo la vinculación de datos y el uso de servicios de Angular.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados