Ionic Storage : Stocker des données

Lorsque l’on crée une application, on peut avoir besoin de stocker une ou plusieurs variables pour les retrouver plus tard. Et c’est exactement l’idée derrière Ionic Storage !

Conserver le meilleur score du joueur, ses préférences, sa progression… Ionic Storage va utiliser le moyen le plus adapté pour stocker les données en fonction de la plate-forme de votre application. Pas besoin de se soucier du moyen de stockage, il suffit d’apprendre les quelques méthodes de ce service pour stocker tout ce que l’on désire !

Importer et utiliser Ionic Storage dans son application

Le package Storage est installé par défaut dans les applications Ionic 2. L’utilisation est très bien décrite dans la doc officielle. Mais je vais écrire ici un petit guide d’utilisation rapide.

1) Importer Storage dans un fichier module de votre application

Copy 
1//import...
2import { IonicStorageModule } from '@ionic/storage';
3
4@NgModule({
5declarations: [
6//...
7],
8imports: [
9BrowserModule,
10IonicModule.forRoot(MyApp),
11IonicStorageModule.forRoot()
12],
13//...

2) Importer le dans le component où vous souhaitez l’utiliser et n’oublier pas de l’injecter dans le constructeur.

Copy 
1import { Component } from '@angular/core';
2import { NavController } from 'ionic-angular';
3import { Storage } from '@ionic/storage';
4
5@Component({
6//...
7})
8export class HomePage {
9
10constructor(private storage: Storage, public navCtrl: NavController) {
11
12}
13
14}

3) Utiliser les méthodes de stockage appropriées. Les deux les plus utilisées sont :

Copy 
1storage.set('nomVariable', 'valeur');

Elle permet de stocker une valeur dans la base de données.

Copy 
1storage.get('nomVariable').then((valeur) => {
2console.log('Ma variable contient ', valeur);
3});

Pour récupérer et utiliser une valeur de la base de données.

Voici un exemple que j’ai mis en place :

Copy 
1import { Component } from '@angular/core';
2import { NavController } from 'ionic-angular';
3import { Storage } from '@ionic/storage';
4
5@Component({
6selector: 'page-home',
7templateUrl: 'home.html'
8})
9export class HomePage {
10
11compteurVue : number = 0;
12
13constructor(private storage: Storage, public navCtrl: NavController) {
14
15}
16
17ngOnInit() {
18this.storage.get('nbVues').then((val) => {
19if (!(val == null)) {
20this.storage.set('nbVues', val+1);
21}
22else {
23this.storage.set('nbVues', 1);
24}
25});
26}
27
28ngAfterViewInit() {
29this.storage.get('nbVues').then((val) => {
30this.compteurVue = val;
31});
32}
33
34}

Et le template HTML qui correspond :

Copy 
1...
2
3<p>Cette page a été vue {{ compteurVue }} fois !!</p>

Ce code permet de compter le nombre de fois ou la page d’accueil de l’application à été chargée.

Gérer les données stockées quand on teste l’application

En voulant utiliser Ionic Storage, j’ai été confronté à un problème lors des tests. Je voulais que l’application ai un certain comportement lorsque ma variable n’existait pas encore dans la base de données. Mais sa valeur restait enregistré des tests précédents.

Comment alors supprimer les valeurs déjà existantes dans la base de données sans passer par le code ?

Lors de tests à l’aide de la commande ionic serve avec les réglages par défaut, Ionic Storage utilise indexedDB. J’ai donc du chercher comment modifier cette base de donnée sous Firefox (le navigateur que j’utilise).

Voici la marche à suivre :

1. Ouvrir les outils de développeurs (CTRL-MAJ-I)

2. Activer le panel de mémoire si il n’est pas disponible:

3. Utiliser l’onglet pour modifier les valeurs voulues dans indexedDB

Voilà pour l’instant ce que j’ai eu l’occasion d’apprendre sur le stockage à “long terme” sur une application Ionic !