SQLite is an open-source self-contained, high-reliability, embedded, full-featured, public-domain, SQL database engine. It is a serverless database. Most of the mobile application uses the SQLite to store the data on devices.

Uses of SQLite plugin in the Ionic 2 Mobile Application.
1. You can  store user id and key, 
2. Login related information
3. E-commerce cart data
4. Local storage

In this tutorial, you will learn, how to use the SQLite native plugin on the Ionic 2 applications. This tutorial teaches you, how to create a simple textbox and store the textbox value using the SQLite native plugin. And retrieve the stored data to display.

SQLite Preview Using the Android Emulator(Genymotion)

SQLite Preview Using the iOS Emulator(Xcode)

You can not preview this application using the Browser.

Create a new Ionic 2 project using

ionic start sqlite blank --v2

Then install the SQLite plugin using the below command.

ionic plugin add cordova-sqlite-storage --save
npm install --save @ionic-native/sqlite

Import the SQLite class to the app.module.ts file

import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

Include the SQLite in the provider of the app.module.ts file.

providers: [SQLite,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

Now create a text box in the home.html

<ion-item>
<ion-input type="text" [(ngModel)]="username" placeholder="Enter Username"></ion-input>
</ion-item>

Create a button with click event in the home.html file.

<button ion-button color="danger" (click)="save()" > Save </button>

Iterate and display the stored value in the SQLite on the home.html file using the ngFor.

<ion-list>

<ion-item href="#" *ngFor="let x of items" >
{{x.name}}
</ion-item>

</ion-list>

Import the SQLite class to the home.ts file

import { SQLite, SQLiteObject } from '@ionic-native/sqlite';

Create a reference in the constructor.

constructor(public navCtrl: NavController,private sqlite: SQLite) {

}

Now create a function to catch the textbox value and store them on the SQLite.

this.sqlite.create({
name: 'data.db',
location: 'default'
})
.then((db: SQLiteObject) => {

//create table section
db.executeSql('CREATE TABLE IF NOT EXISTS usernameList(id INTEGER PRIMARY KEY AUTOINCREMENT,name)', {})
.then(() => alert('Executed SQL'))
.catch(e => console.log(e));

//data insert section
db.executeSql('INSERT INTO usernameList(name) VALUES(\''+this.username+'\')', [])
.then(() => alert('Executed SQL'))
.catch(e => console.log(e));
})
.catch(e => alert(JSON.stringify(e)));

The above code creates a table if the table does not exist. And it will insert the values into the usernameList table using the insert query. The above code uses the SQL statement kind of approach. However, you can do the same task using SQL prepared statement approach( for placeholder you can use the question mark and assign values in the array).

//data insert section
db.executeSql('INSERT INTO usernameList(name) VALUES(?)', [this.username])


If you want to retrieve data, then you have to write the SELECT query to retrieve data. After executing the SELECT query, you have to iterate the data like 

result.rows.item( row_index).column_name
#Example
result.rows.item(0).name

The Full source code of the home.html file.
 

<ion-content padding>


<ion-item>
<ion-input type="text" [(ngModel)]="username" placeholder="Enter Username"></ion-input>
</ion-item>

<button ion-button color="danger" (click)="save()" > Save </button>

<ion-list>

<ion-item href="#" *ngFor="let x of items" >
{{x.name}}
</ion-item>

</ion-list>

</ion-content>

The Full source code of home.ts file.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController,private sqlite: SQLite) {

}

username='';
items = [];
save()
{


this.sqlite.create({
name: 'data.db',
location: 'default'
})
.then((db: SQLiteObject) => {

//data insert section
db.executeSql('CREATE TABLE IF NOT EXISTS usernameList(id INTEGER PRIMARY KEY AUTOINCREMENT,name)', {})
.then(() => alert('Executed SQL'))
.catch(e => console.log(e));

//data insert section
db.executeSql('INSERT INTO usernameList(name) VALUES(?)', [this.username])
.then(() => alert('Executed SQL'))
.catch(e => console.log(e));


//data retrieve section

db.executeSql('select * from usernameList', {}).then((data) => {

alert(JSON.stringify(data));

//alert(data.rows.length);
//alert(data.rows.item(5).name);
this.items = [];
if(data.rows.length > 0) {
for(var i = 0; i < data.rows.length; i++) {
//alert(data.rows.item(i).name);
this.items.push({name: data.rows.item(i).name});
}
}

}, (err) => {
alert('Unable to execute sql: '+JSON.stringify(err));
});
})
.catch(e => alert(JSON.stringify(e)));
alert(this.username);

}

}


You can preview this application using 

1. Ionic view mobile application
2. Emulators.

Upload this project to the Ionic server, to preview this application on Ionic view mobile application

ionic upload

To preview the application using the Android Emulator

ionic platform add android
ionic run android

To preview the application using the iOS emulator

ionic platform add ios
ionic run ios

Tested Device:
Yureka Plus

Below is the Ionic 2 information, while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1