Ionic 4 Native Storage Tutorial – Storing & Retrieving Data

By Digamber Rawat Last updated on
Today we will learn how to store data using Ionic 4 NativeStorage, We will learn how to store data on the local device in JSON or key-value pair format.

Storing data on a user’s device is an essential task for any dev, and it is needed nearly in every web or mobile app. A user might save any data on his/her device, be it a shopping cart, user profile, app settings, user sessions, etc.

Configure Ionic Project

Let’s install a new Ionic/Angular app, to begin with, this tutorial.

# Update Ionic CLI
sudo npm update -g ionic

# Create new Ionic app
ionic start ionic-storage blank --type=angular

# Enter inside project
cd ./ionic-storage

Run command to install lab mode as a dev-dependency for testing purpose.

npm i @ionic/lab --save-dev

Start Ionic Local Storage project.

ionic serve -l

Setting up Native Storage in Ionic 4

Run command to install Cordova’s nativestorage plugin.

ionic cordova plugin add cordova-plugin-nativestorage

Run command to install Ionic Native plugin for using Storage feature.

npm install @ionic-native/native-storage

To use Native storage plugin throughout the application, Import and register NativeStorage module in AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { NativeStorage } from '@ionic-native/native-storage/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    NativeStorage,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Implementing Storage in Ionic App

Ionic offers two ways to store data in the storage.

Storage in Ionic Cordova SQLite

Cordova’s sqlite storage plugin is used to save the data in key/value pairs & JSON format, we use Ionic’s storage module with Cordova’s cordova-sqlite-storage plugin.

In SQLite in Ionic 4 is used for native apps that work on mobile devices. The localStorage or IndexedDB is used to store data in Progressive Web apps and simply works on the browser. However, the best method is chosen depending on your platform and requirements.

Cordova Native Storage

Cordova’s cordova-plugin-nativestorage plugin provides faster and more data storage. It is suitable for Native storage for iOS, Android, and Windows.

In this tutorial, we will learn to work with Cordova’s Native storage with the cordova-plugin-nativestorage plugin.

Let’s begin installing Ionic/Angular project, Run the following command to create a new Ionic 4 application.

To access Native Storage methods, we need to Import the NativeStorage plugin in the home template and inject it in the constructor.

import { Component } from '@angular/core';
import { NativeStorage } from '@ionic-native/native-storage/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  constructor(private nativeStorage: NativeStorage) { }

}

Accessing Storage Methods

Now we can quickly get and set the data with the help of Native Storage methods.

Storing values

Let’s start setting up some data in the local storage using the nativeStorage setItem method.

To store value in local storage.

setItem(storageRef: string, value: any)
this.nativeStorage.setItem('myitem', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Stored item!'),
    error => console.error('Error storing item', error)
  );

Get values

Let’s start retrieving data from the local storage using the nativeStorage getItem method.

To get value from local storage.

getItem(storageRef: string, value: any)
this.nativeStorage.getItem('myitem')
  .then(
    data => console.log(data),
    error => console.error(error)
  );

Get All Keys

Let’s start retrieving data from the local storage using the nativeStorage getItem method.

this.nativeStorage.keys()
   .then(
     data => console.log(data),
     error => console.error(error)
    );

Remove Value

To remove value from storage use the following method.

this.nativeStorage.remove('myitem')
.then(
  data => console.log(data),
  error => console.error(error)
);

Removing All Stored Values

To remove all stored values from storage use the given below method.

this.nativeStorage.remove('myitem')
.then(
  data => console.log(data),
  error => console.error(error)
);

Conclusion

Finally, we completed Ionic 4 Storage tutorial with in this tutorial we learned how to use NativeStorage to set and get the data in storage.

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Thanks for checking this tutorial out :) Let me know if you have any suggestions or issue related to this tutorial, or you want to request a new tutorial. Just shoot me a mail here.