Ionic Storage

Loading...

From the course by The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

204 ratings

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

204 ratings

Course 3 of 5 in the Specialization Full Stack Web and Multiplatform Mobile App Development

This course focuses on developing multiplatform mobile applications using the Web technologies (HTML5, CSS and Javascript). In particular we make use of the Cordova hybrid application framework to develop and target multiple mobile platforms with a single codebase. We make use of the Ionic framework (Ionic Ver 3.x), one of the most popular mobile application frameworks, that is built with mobile-optimized HTML5 and CSS based components and Angular. You will learn about UI development with Ionic and then using Cordova's modules to access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your HTML5, CSS, Javascript and Angular skills, and (c) Use various features of the Ionic framework to build hybrid mobile applications

From the lesson

Ionic Split Pane, Grid and Storage, and Deploying your App

In this module you will learn about using local storage within your app. You will then learn about configuring your machine for building your app for various platforms, and deploying your app to emulators and devices.

Ionic Storage6:25

Exercise (Video): Ionic Storage27:44

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Many ionic applications will definitely benefit from their ability to persist

data across app restocks and app reloads within your application.

So very often when you turn off your mobile device and then turn it on at a later time,

or close your app and then restart your app,

you want any changes that you have made,

or any data that you have input into your application,

to be saved so that it can be retrieved at a future time.

So, this is when the permanent storage that is available on

your mobile devices comes to your aid and we have

seen that both Android and iOS have a way of persisting data within the device.

Although you won't see their support like in

their full fledged file system that you might see on

a standard desktop or a regular computer

but their ability to be able to store and retrieve data is very useful.

Structured data can also be stored using

the database support that is available in mobile devices.

Both Android and iOS make use of

the SQLite database for supporting structured data on your mobile device.

We'll look at SQLite a little bit later.

But ionic itself uses a class called 'the storage' which

provides an all encompassing view of the underlying storage.

So that it separates you from the details of exactly how the storage is done on

a specific mobile device and exports a common API that you can make use of

within your ionic application.

Let's look at the details next.

Ionic storage supports key/value pair storage so

within your application you can store content by addressing them using

a key and then specifying the corresponding value and then either

store this content and then retrieve the content at a later stage by specifying the key.

Now, underneath, the ionic storage uses a variety of storage underneath.

If you are running your ionic application as a native app,

then you can use SQLite underneath.

We will see how we can configure ionic storage to use SQLite in one of the later lessons.

If not, then it results to using the IndexedDB or WebSQL or

Localstorage in that order when you are

using your ionic application as a progressive web application.

Now, if you are going to be using it on

a native device and you want to use

the SQLite storage support that is available within the native device,

be it Android or be it iOS,

then you'll need to install what is called the Cordova SQLite plugin.

We'll look at that in one of the later exercises.

For this moment, we're going to result to using the standard,

the default web ionic wants to store.

So if you don't specify the SQLite, well,

maybe that's also the result of using IndexedDB or WebSQL or local storage in that order,

whatever, ionic can enable to use on a specific device.

In the exercise that follows this lecture,

you will see that our ionic application is using IndexedDB in our browser.

The storage itself is part of

the ionic storage library so you will import the ionic storage module

from the ionic storage library into your app module and then you

configure that within your app module as we will see in the exercise.

And then, wherever you want to make use of storage,

say for example within various components of the various pages in your ionic app,

you will import storage from ionic storage

and then inject the storage service into the constructor of

your component or your page and then it becomes available for you and provides you

with various methods that then you can use to store your content.

Storage itself supports a promise-based methods which we will discuss in the next slide.

The storage itself supports several instance methods.

Here, I'll give you a subset of

these instance methods specifically those that I will make use of in the exercise.

There are a few more than these but these are the key instance methods

that we will make use of with an atypical ionic application.

Now, in your application you may want to first check by calling

the ready method on your storage to ensure that your storage is ready for being accessed.

Now, in your application you can use the get

method which takes the key as a parameter.

The get method will return the value corresponding to the key.

You can return a promise first and then inside the promise you use

the then method of the promise and inside of the then method then the problem resolves,

the data will become available for your application.

So, you will see me using this approach within the exercise.

Similarly, the set method takes the key and the value as the two parameters,

and then stores the data into your underlying storage.

The removed method, when given a key,

will delete the corresponding value that is stored in your ionic storage.

The clear method will clear the entire contents of

your storage so be very careful when you are using the clear method.

You want to be sure that that is exactly what you want to

do when you want to invoke the clear method.

With this quick understanding of ionic storage we will proceed onto

the exercise where we will see the use of

these various methods within our ionic application.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play