Ionic 7 Native Storage Tutorial – Storing & Retrieving Data

Last Updated on by in Ionic
Today we will learn how to store data using Ionic 6 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.

Cordova native storage provides faster and more data storage, also it is suitable for iOS, Android, and Windows.

Configure Ionic Project

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

# Update Ionic CLI
npm install -g @ionic/cli

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

# Enter inside project
cd ./ionic-storage

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

Setting up Native Storage in Ionic

You are required to add the Ionic native and Cordova native storage plugin.

Hence open the terminal and type the following command, then execute the command to invoke plugin installation.

npm i cordova-plugin-nativestorage --legacy-peer-deps
npm install @ionic-native/native-storage --legacy-peer-deps

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

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

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

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

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

export class AppModule {}

Using Storage in Ionic App

To store the data on local storage or to access Native Storage methods.

You have to import the NativeStorage module from the ‘@ionic-native/native-storage/ngx’ package; likewise, add the NativeStorage package into the constructor() method as displayed below.

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 Native Storage Methods

Now we can quickly get, set and remove the data from the device’s local storage using the Cordova native storage plugin. Here are the methods that we have accessed to work on storage.

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 have completed Ionic Native storage tutorial with example in this tutorial we learned how to use NativeStorage to set, get and remove the data in from the device storage.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.