El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Utilitzant Ionic Storage

Següent ►
►

Introducció

Ionic Storage és una biblioteca que proporciona una API simple per emmagatzemar dades localment en una aplicació Ionic. És compatible amb diversos mecanismes d'emmagatzematge, com ara IndexedDB, WebSQL, i localStorage, i selecciona automàticament el millor mecanisme disponible en el dispositiu de l'usuari.

Objectius

En aquest tema, aprendràs a:

  • Configurar Ionic Storage en la teva aplicació.
  • Emmagatzemar, recuperar i eliminar dades utilitzant Ionic Storage.
  • Gestionar dades complexes amb Ionic Storage.

Configuració de Ionic Storage

Instal·lació

Per començar a utilitzar Ionic Storage, primer has d'instal·lar la biblioteca i el mecanisme d'emmagatzematge que desitgis utilitzar. En aquest exemple, utilitzarem IndexedDB.

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

Configuració

Després d'instal·lar les dependències, has de configurar Ionic Storage en el teu projecte. Obre el fitxer app.module.ts i afegeix la configuració següent:

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    IonicStorageModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Utilitzant Ionic Storage

Inicialització

Abans de poder utilitzar Ionic Storage, has d'inicialitzar-lo. Això es fa normalment en el constructor del component principal o en un servei dedicat.

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private storage: Storage) {
    this.init();
  }

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

Emmagatzemar Dades

Per emmagatzemar dades, utilitza el mètode set. Aquest mètode accepta una clau i un valor.

async setData() {
  await this.storage.set('name', 'John Doe');
}

Recuperar Dades

Per recuperar dades, utilitza el mètode get. Aquest mètode accepta una clau i retorna el valor associat.

async getData() {
  const name = await this.storage.get('name');
  console.log(name); // John Doe
}

Eliminar Dades

Per eliminar dades, utilitza el mètode remove. Aquest mètode accepta una clau i elimina el valor associat.

async removeData() {
  await this.storage.remove('name');
}

Emmagatzemar Dades Complexes

Ionic Storage també permet emmagatzemar objectes complexos. Els objectes es serialitzen automàticament a JSON.

async setComplexData() {
  const user = {
    id: 1,
    name: 'John Doe',
    email: 'john.doe@example.com'
  };
  await this.storage.set('user', user);
}

async getComplexData() {
  const user = await this.storage.get('user');
  console.log(user); // { id: 1, name: 'John Doe', email: 'john.doe@example.com' }
}

Exercicis Pràctics

Exercici 1: Emmagatzemar i Recuperar una Llista de Tasques

  1. Crea una interfície Task amb les propietats id, title i completed.
  2. Emmagatzema una llista de tasques utilitzant Ionic Storage.
  3. Recupera la llista de tasques i mostra-la en la consola.

Solució

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

async setTasks() {
  const tasks: Task[] = [
    { id: 1, title: 'Buy groceries', completed: false },
    { id: 2, title: 'Walk the dog', completed: true }
  ];
  await this.storage.set('tasks', tasks);
}

async getTasks() {
  const tasks: Task[] = await this.storage.get('tasks');
  console.log(tasks);
}

Exercici 2: Actualitzar una Tasca

  1. Recupera la llista de tasques.
  2. Actualitza l'estat de la tasca amb id 1 a completed: true.
  3. Emmagatzema la llista de tasques actualitzada.

Solució

async updateTask() {
  const tasks: Task[] = await this.storage.get('tasks');
  const taskIndex = tasks.findIndex(task => task.id === 1);
  if (taskIndex > -1) {
    tasks[taskIndex].completed = true;
    await this.storage.set('tasks', tasks);
  }
}

Conclusió

En aquest tema, has après a configurar i utilitzar Ionic Storage per emmagatzemar, recuperar i eliminar dades en la teva aplicació Ionic. També has vist com gestionar dades complexes i has practicat amb exercicis pràctics. Amb aquests coneixements, pots començar a gestionar dades localment en les teves aplicacions Ionic de manera eficient.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats