Navigate back to the homepage

Ionic Storage : Stocker des données

Morgan Ridel
August 24th, 2017 · 1 min read

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

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.

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 :

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

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

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 :

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 :

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.

Capture

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)
  1. Activer le panel de mémoire si il n’est pas disponible:
  1. 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 !

More articles from Morgan Ridel

Du CSS efficace avec Sass : Boostez vos feuilles de style !

Depuis que j'ai commencé mon projet avec ionic j'ai dû apprendre à utiliser les langages fournis par le framework pour programmer. L'un d…

August 16th, 2017 · 3 min read

Remonter dans le temps avec Git

Cet article fait partie d'une série d'article sur Git pour les débutant comprenant un article sur les bases du développement avec Git et…

August 9th, 2017 · 2 min read
© 2017–2022 Morgan Ridel
Link to $https://twitter.com/morganridelLink to $https://github.com/morganridelLink to $https://www.linkedin.com/in/morgan-ridel-017a9ab6/