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í:
Instalación plugin Preferences
Abre una terminal en tu proyecto y escribe el siguiente comando:
|
1 |
npm install @capacitor/preferences |
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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
Preferences |
Código final (TS)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
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.
hola