Storing Data inside Ionic Apps

ionic-4-crash-course-day-5
Welcome to the 5. lesson of the Ionic Crash Course!

Today we will tackle another very common obstacle when building a mobile app: Where to store the data of your app?

Lucky us, there are already great solutions out there which embrace either the localstorage of a browser or even the native device memory. We will start with another great package from Ionic.

1. Setting up Ionic Storage

Ionic Storage is our go to package for easily managing data. With Ionic Storage we can save JSON objects and key/value pairs to different storage engines, unified through one interface.

Ok in easy words this means, Storage will internally select which storage engine is available and select the best possible solution for us. If you run the preview, it will try IndexedDB, WebSQL and finally localstorage.

The problem with localstorage in general is that this can get cleaned from the OS of a mobile device and you loose all data. Not a very good idea.

To get the best storage solution on a device we now need to add a new Cordova plugin which will allow access to the SQLite storage which Ionic Storage will then use internally. Go ahead and run:

You only need to run the second command for the Ionic Native package if it’s not already installed, but normally it is already included with basic Ionic apps so simply check your package.json if the entry already exists!

We also want to generate a new serve which will handle our connection to the storage, so also run:

Of course we now need to change a few things inside our app/app.module.ts as you might already expect. We need to hook up the IonicStorageModule to our module like before with the HttpClient:

That’s it, we are now ready to use the Storage!

2. Working with Ionic Storage

Like in the HTTP lesson before it’s a good idea to maintain your logic in a service and not directly inside the class of the view. We have created a FavoriteService, because we want to be able to start films which we like the most.

So we need to be able to store the IDs of those films, check if a current film is already a favorite and of course revert everything again.


With Ionic Storage we can either call set() or get() and both will return a Promise. Unlike our Observable from before this is only handled with a then() block, but the operation is still async!

If we want to get a list of all IDs we can easily return the Storage value for our predefined STORAGE_KEY.

To favorite a film, we need to retrieve the list of all films already inside the storage and then either add the film or set a completely new object if nothing is there yet.

Don’t worry about duplicates, we will handle this from the page later.

To remove a film we use more or less the same logic, but now we get the index of our film inside the array and call the splice method to remove it from the array before we save it back.

Open your src/services/favorite.service.ts and replace it with:

If we just want to check whether a film is already stored we retrieve the array and check if the key can be found inside.

Now we have already implemented all of our business logic for storing, it’s time to change our UI so we can actually use those functions!

3. Using our Favorite Service

Whenever we enter our FilmDetailsPage we want to check whether the current film is already a favorite or not.

Inside our view we will use again the *ngIf check which allows us to test if a condition is true or not. By doing this we can add the code for 2 different buttons, but only one will be displayed at a time!

The condition will check for a variable inside our class, so start with the view and change your pages/film-details/film-details.page.html to:

So we got either an outline button or a full button, depending on the state of isFavorite. Inside the class we now have to take care of setting the value correctly.

But as we have implemented our service so super clear and clean before, it’s absolutely no problem to build the page, right?

After we get the data for the current film from the URL path we pass the ID to our service and first of all check if that film is already one of our favorites. Inside the then() block we can use the result and set it to the variable for our condition.

To favorite or remove a favorite we can rely on the functions we implemented previously inside the service again, and inside the callback block we just change our local variable manually. We could also use a return value here but we want to keep things simple, and it should do the job for us!

So now go ahead and change your pages/film-details/film-details.page.ts to:

You can now navigate to the details pages and should be able to star and unstar a film!

ionic-4-storage

Of course this is not only a tiny effect, it’s actually stored inside the database. You can navigate to other movies, star them and you will see that your selecting will be stored all the time, even if your refresh the window!

4. Next Steps

Congratulations on finishing the 5. lesson!

You are now aware of how to store and save important data inside your Ionic app. We haven’t seen where exactly the values are stored but we will come back to this point in the debugging section on the last day of this course.

In the next lesson we will take a look at how to easily style our app and change the appearance within minutes. Really.