Use Ionic Storage To Save Data In Ionic App

In this post, we will take a look at how you can save data in Ionic apps using Ionic Storage. The data that we will store will be persistent, meaning it will remain in memory even if the app is closed or restarted.

Storing data in ionic using Ionic Storage is a great way to store data that is important to the working of your app such as an auth token or some other activity that you need to track. Let me make one thing clear you should NEVER save passwords locally. Although data saved in one app cannot be accessed by another app but saving passwords locally is a big no-no.

The way that Ionic Storage works is that it chooses the storage technologies such as SQLite, IndexedDB, WebSQL, and localStorage automatically depending on availability and preference. While running on a device it will give priority to SQLite over the other. In the case of a Progressive Web App, it will give priority to IndexedDB, WebSQL, and localStorage in order.

We will create a simple app that will have two buttons, one will save our data and the other will get the data. The data that we will save will be a JSON object, however, you can also store a string.

Step 1)

Let’s create a new Ionic app. We do that by running the following command.

1

2

ionic start ionicStorage blank

cd ionicStorage

Note here that I am using the blank template, also note that I have navigated my terminal inside the newly created project.

Step 2)

Now we need to add the cordova-sqlite-storage plugin. Only add this plugin if you wish to run your app on a Native iOS or Android device. The plugin is not necessary for a PWA as explained above. To add the plugin we will run the following code.

1

2

ionic cordova plugin add cordova-sqlite-storage

npm install--save@ionic/storage

Here we have also added the Ionic-Native wrapper for the plugin as well.

Step 3)

We will need to add IonicStorageModule to our app’s module, so open up app\app.module.ts and code it as shown below.

app\app.module.ts

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

@NgModule({

declarations:[

// ...

],

imports:[

BrowserModule,

IonicModule.forRoot(MyApp),

IonicStorageModule.forRoot()

],

bootstrap:[IonicApp],

entryComponents:[

// ...

],

providers:[

// ...

]

})

exportclassAppModule{}

Step 4)

Now it’s time to code up our buttons. Open up \src\pages\home\home.html and code it as follows.

\src\pages\home\home.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<ion-header>

<ion-navbar>

<ion-title>

Ionic Storage Test

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<p>

<button ion-button block(click)="setValue()">Set Value</button>

<button ion-button block(click)="getValue()">Get Value</button>

</p>

</ion-content>

Here we are creating two buttons, one to set the value and another to get the value.

Step 5)

Now let’s code the HomePage component, open up \src\pages\home\home.ts and code it as follows.

\src\pages\home\home.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

import{Component}from'@angular/core';

import{NavController}from'ionic-angular';

import{Storage}from'@ionic/storage';

@Component({

selector:'page-home',

templateUrl:'home.html'

})

exportclassHomePage{

publicdataToStore;

constructor(publicnavCtrl:NavController,privatestorage:Storage){

this.dataToStore={

name:'Prantik',

site:'pointDeveloper.com'

}

}

setValue(){

this.storage.set("object",this.dataToStore).then((successData)=>{

console.log("Data Stored");

console.log(successData);

})

}

getValue(){

this.storage.get("object").then((data)=>{

console.log(data);

})

}

}

Here first we are importing Storage and injecting it into our constructor. Then inside of the constructor, we are initializing it with some data. Inside the setValue() function we are saving the data to memory by doing this.storage.set(). The .set() method accepts two arguments the first is a key, the second argument is an object to be stored. The .set() function returns a promise, in the success callback of the promise we get the object that was saved returned to us. This is great if you want to perform some operation on data once it is saved.

We can get the stored the data by using the this.storage.get() and passing the key which we used to save the data.

Conclusion

In this example, we are logging the data in this example just to illustrate the working of storage you can store any data you want. Make sure that you are not storing any sensitive information like passwords using it.

Download Code:

Code Will Be Sent Via Email

Your Name (required)

Your Email (required)

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy