El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com emmagatzemar dades localment en una aplicació Ionic. L'emmagatzematge local és crucial per a moltes aplicacions, ja que permet guardar informació de manera persistent, fins i tot quan l'usuari està fora de línia. Explorarem diverses tècniques i eines per aconseguir-ho.

Objectius del Tema

Entendre les opcions d'emmagatzematge local disponibles en Ionic.
Aprendre a utilitzar l'API de LocalStorage.
Utilitzar IndexedDB per a emmagatzematge més complex.
Implementar l'emmagatzematge local amb Ionic Storage.

Opcions d'Emmagatzematge Local

LocalStorage

LocalStorage és una API senzilla que permet emmagatzemar dades en el navegador. Les dades emmagatzemades en LocalStorage persisteixen fins que es netegen explícitament.

Avantatges:

Fàcil d'utilitzar.
Ideal per a petites quantitats de dades.

Desavantatges:

Limitat a 5MB de dades.
No és adequat per a dades complexes.

IndexedDB

IndexedDB és una API més avançada que permet emmagatzemar grans quantitats de dades estructurades. És ideal per a aplicacions que necessiten emmagatzemar dades complexes.

Avantatges:

Pot emmagatzemar grans quantitats de dades.
Suporta transaccions i consultes complexes.

Desavantatges:

Més complex d'utilitzar que LocalStorage.

Ionic Storage

Ionic Storage és una solució d'emmagatzematge que proporciona una API unificada per a diverses opcions d'emmagatzematge, com LocalStorage, IndexedDB, SQLite, etc.

Avantatges:

API unificada i fàcil d'utilitzar.
Suporta múltiples mecanismes d'emmagatzematge.
Ideal per a aplicacions híbrides.

Desavantatges:

Pot requerir plugins addicionals per a funcionalitats avançades.

Utilitzant LocalStorage

Exemple de LocalStorage

// Emmagatzemar dades
localStorage.setItem('clau', 'valor');

// Recuperar dades
const valor = localStorage.getItem('clau');
console.log(valor); // Output: valor

// Eliminar dades
localStorage.removeItem('clau');

// Netejar tot l'emmagatzematge
localStorage.clear();

Exercici Pràctic

Crea una pàgina en la teva aplicació Ionic que permeti a l'usuari introduir i emmagatzemar una nota.
Mostra la nota emmagatzemada quan l'usuari torni a obrir l'aplicació.

Solució:

// home.page.ts
import { Component } from '@angular/core';

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

  constructor() {
    this.nota = localStorage.getItem('nota') || '';
  }

  guardarNota() {
    localStorage.setItem('nota', this.nota);
  }
}

<!-- home.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>
      Emmagatzemar Nota
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-label position="floating">Nota</ion-label>
    <ion-input [(ngModel)]="nota"></ion-input>
  </ion-item>
  <ion-button expand="full" (click)="guardarNota()">Guardar Nota</ion-button>
</ion-content>

Utilitzant IndexedDB

Exemple d'IndexedDB

// Obrir una base de dades
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('myStore', { keyPath: 'id' });
};

request.onsuccess = (event) => {
  const db = event.target.result;

  // Afegir dades
  const transaction = db.transaction('myStore', 'readwrite');
  const store = transaction.objectStore('myStore');
  store.add({ id: 1, name: 'John Doe' });

  // Recuperar dades
  const getRequest = store.get(1);
  getRequest.onsuccess = (event) => {
    console.log(event.target.result); // Output: { id: 1, name: 'John Doe' }
  };
};

Utilitzant Ionic Storage

Instal·lació

npm install @ionic/storage-angular

Configuració

// app.module.ts
import { IonicStorageModule } from '@ionic/storage-angular';

@NgModule({
  imports: [
    IonicStorageModule.forRoot()
  ],
})
export class AppModule {}

Exemple d'Ionic Storage

// home.page.ts
import { Component } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

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

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

  async init() {
    await this.storage.create();
    this.nota = await this.storage.get('nota') || '';
  }

  async guardarNota() {
    await this.storage.set('nota', this.nota);
  }
}

Exercici Pràctic

Crea una pàgina en la teva aplicació Ionic que permeti a l'usuari introduir i emmagatzemar una llista de tasques.
Mostra la llista de tasques emmagatzemades quan l'usuari torni a obrir l'aplicació.

Solució:

// home.page.ts
import { Component } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

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

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

  async init() {
    await this.storage.create();
    this.tasques = await this.storage.get('tasques') || [];
  }

  async afegirTasca() {
    this.tasques.push(this.tasca);
    await this.storage.set('tasques', this.tasques);
    this.tasca = '';
  }
}

<!-- home.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>
      Llista de Tasques
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-label position="floating">Nova Tasca</ion-label>
    <ion-input [(ngModel)]="tasca"></ion-input>
  </ion-item>
  <ion-button expand="full" (click)="afegirTasca()">Afegir Tasca</ion-button>

  <ion-list>
    <ion-item *ngFor="let tasca of tasques">
      {{ tasca }}
    </ion-item>
  </ion-list>
</ion-content>

Resum

En aquest tema, hem explorat diverses opcions per emmagatzemar dades localment en una aplicació Ionic. Hem après a utilitzar LocalStorage, IndexedDB i Ionic Storage, i hem implementat exemples pràctics per a cada opció. Aquestes tècniques són fonamentals per a crear aplicacions que necessiten emmagatzemar dades de manera persistent i accessible, fins i tot quan l'usuari està fora de línia.

Emmagatzemant Dades Localment

Objectius del Tema

Opcions d'Emmagatzematge Local

LocalStorage

IndexedDB

Ionic Storage

Utilitzant LocalStorage

Exemple de LocalStorage

Exercici Pràctic

Utilitzant IndexedDB

Exemple d'IndexedDB

Utilitzant Ionic Storage

Instal·lació

Configuració

Exemple d'Ionic Storage

Exercici Pràctic

Resum

Curs de Desenvolupament Ionic

Mòdul 1: Introducció a Ionic

Mòdul 2: Components Bàsics i Navegació

Mòdul 3: Estilització i Tematització

Mòdul 4: Treballant amb Dades

Mòdul 5: Components i Funcionalitats Avançades

Mòdul 6: Proves i Desplegament

Mòdul 7: Temes Avançats