Uso de Capacitor Storage con Ionic Framework / Angular

Almacenando data local

¡Suscríbete al feed!
Código fuente

Normalmente cuando trabajamos con tecnologías web, necesitamos almcenar dtata en algun tipo de almacenamiento local. Algo que se ha vuelto muy normal para desarrolladores con o sin experiencia es utilizar el localstorage que los navegadores ofrecen, por ejemplo:  localStorage.setItem('user', 1); lo cual es completamente válido también al trabajar con aplicaciones hibridas, sin embargo podemos optimizar el rendimiento utilizando Capacitor Storage.

En este ejemplo cubriré 3 de las funciones principales set, get, remove, si deseas profundizar en el resto de funciones te recomiendo leer la Documentación de Capacitor Storage.

Uso de Capacitor Storage

A continuación iniciaremos un proyecto sencillo para cubrir las funciones anteriormente mencionadas.

Iniciamos un proyecto con Capacitor habilitado

ionic start simpleStorage tabs --capacitor

Una vez se ejecuta el comando Ionic preguntará que framework vas a utilizar, este ejemplo se desarrollará con Angular, selecciona "Angular" y teclea "Enter"

Asumo que ya tienes conocimientos previos de Ionic y Angular, así que procedemos a abrir el folder creado en tu editor favorito, puedes ejecutar también el App para obtener una vista previa.

A continuación creamos un servicio llamado "storage", es donde almacenaremos la lógica para manipular la data:

ionic g service services/storage

Procederemos a editar nuevo servicio creado en la carpeta "services/storage", de modo que quede así:


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

const { Storage } = Plugins;
@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor() { }

  set = async (key: string, value: any): Promise => {
      await Storage.set({
        key,
        value: JSON.stringify(value)
      });
  }

  get = async (key: string): Promise => {
    const item = await Storage.get({ key });
    return JSON.parse(item.value);
  }

  remove = async (key: string): Promise => {
    await Storage.remove({ key });
  }
}


Hecho de este modo no necesitaremos crear las funciones del API de Capacitor Storage cada vez que las necesitemos, simplemente las importamos.


Editamos el archivo "tab1.page.html" en la carpeta "app/tab1", de modo que al modificarlo quede así:

Procedemos a agregar la lógica para almacenar el dato:


import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

import { StorageService } from '../services/storage.service';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  nameForm = new FormGroup({
    name: new FormControl()
  });

  constructor( private storage: StorageService ) {}

  save = () => {
    this.storage.set('nombre', this.nameForm.value.name).then(
        res => console.log(res)
    );
  }
}

Si todo es correcto puedes ejecutar tu aplicación, y al presionar guardar, almacena en localStorage el dato, adicionalmente veras en consola el mensaje "Dato guardado".


Procedemos a modificar el archivo "tab2.page.html" en la carpeta "app/tab2", de modo que quede así:

Agregamos la lógica del componente:


import { Component } from '@angular/core';
import { StorageService } from '../services/storage.service';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  name: any;

  constructor( private storage: StorageService ) {}

  getName = async () => {
    this.storage.get('nombre').then(
        res => this.name = res
    );
  }

}


Ahora, puedes ir al tab 2 y presionar el botón "Obtener Nombre", si todo está bien, serás capaz de visualizar el nombre ingresado en la pantalla anterior


Eliminando la data almacenada:

Para ello vamos a agregar en el archivo "tab3.page.html" de "app/tab3" un botón que se encargará de eliminar los datos almacenados, el archivo queda así:

Agregamos la logica:


import { Component } from '@angular/core';
import { StorageService } from '../services/storage.service';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {

  constructor( private storage: StorageService ) {}

  removeData = () => {
    this.storage.remove('nombre');
  }

}

Para este pequeño tutorial he asumido que ya tienes bases de Ionic Framework y Angular, por tal razón no he explicado mucho, simplemente he agregado el funcionamiento básico del tema central del tutorial.

Jeremías Enríquez | Hace 2 meses, 2 semanas

Tags: JavaScript , Ionic Framework , Tutoriales , Angular , TypeScript