Aprende a utilizar preferences de capacitor en IONIC

Hola a todos, hoy os voy a hablar sobre como funciona el plugin Preferences de capacitor en IONIC.

Preferences es un plugin de capacitor que se utiliza para almacenar datos en nuestro dispositivos móviles o en el navegador.

Es como localstorage para móviles.

Creación proyecto IONIC

En primer lugar, es crear un proyecto IONIC, sino sabes como se hace, te dejo un tutorial aquí:

IONIC 7 – Guía sobre como crear tu primera aplicación

Instalación plugin Preferences

Abre una terminal en tu proyecto y escribe el siguiente comando:

Métodos de Preferences

Los principales métodos que tenemos en Preferences son:

• get: Obtenemos el valor almacenado en una clave.
• set: Guardamos el valor en una clave.
• clear: Limpiamos todo el contenido de Preferences
• remove: Eliminamos una clave y su valor.

Ejemplo practico de Preferences

La mejor forma de aprender como funciona es con un pequeño ejemplo, por lo tanto, veamos el resultado final de lo que haremos:

Cuando iniciemos la aplicación, comprobaremos si el producto esta ya almacenado en nuestro dispositivo. Sino lo esta lo parseamos.

Código final (HTML)

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Preferences
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-item>
    <ion-select (ionChange)="saveProduct()" [(ngModel)]="product.name">
      <ion-select-option value="Producto 1">Producto 1</ion-select-option>
      <ion-select-option value="Producto 2">Producto 2</ion-select-option>
      <ion-select-option value="Producto 3">Producto 3</ion-select-option>
    </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>Cantidad: </ion-label>
    <ion-button (click)="decrement()">-</ion-button>
    <ion-text>{{product.quantity}}</ion-text>
    <ion-button (click)="increment()">+</ion-button>
  </ion-item>

  <ion-button (click)="reset()">Reset</ion-button>

</ion-content>

Código final (TS)

import { Component } from '@angular/core';
import { Preferences } from '@capacitor/preferences';

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

  private KEY_PRODUCT = 'product';

  public product: {
    name: string,
    quantity: number
  }

  constructor() {
    // Producto inicial
    this.product = {
      name: 'Producto 1',
      quantity: 0
    }
  }

  async ionViewWillEnter() {

    // Comprobamos si existe el producto guardado
    const product = await Preferences.get({
      key: this.KEY_PRODUCT
    });

    // Sino existe lo creo
    if (!product.value) {
      this.saveProduct();
    } else {
      // Lo obtengo
      this.product = JSON.parse(product.value);
    }

  }

  decrement() {
    // Actualizo el objeto
    this.product.quantity--;
    // Guardo el producto
    this.saveProduct();
  }

  increment() {
    // Actualizo el objeto
    this.product.quantity++;
    // Guardo el producto
    this.saveProduct();
  }

  reset() {
    // Actualizo el objeto
    this.product = {
      name: 'Producto 1',
      quantity: 0
    }
    // Guardo el producto
    this.saveProduct();
  }

  async saveProduct() {
    // Debemos pasar el objeto a string
    await Preferences.set({
      key: this.KEY_PRODUCT,
      value: JSON.stringify(this.product)
    });
  }

}

Por último, os dejo un video donde os lo explico con detalle.

Aquí tienes el repositorio de github.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.