Ionic Local Storage

Local storage is simple ways to store the data without any relational database capabilities.  Ionic 2 storage store data in key/value pairs, the value may be a simple string or a complex JSON Object. Such storage is easy to use and available in both browser-based and hybrid applications. Local storage has a 5 MB data limit which can be extended to 25 MB but can only contain strings.

For complex types of data, local storage has to be serialized and lacks the performance of complex types of data.
This storage, which is not reliable, should be used only if it’s okay to lose the data at any point in time.
A few third-party implementations are available for local storage and one of them is localForage.

The advantage of native storage is it will not store the data in the browser. So we don’t have the limit of storage as in browser and it will more reliable.

Ionic 2 comes with Ionic Storage library which provides automatically use the best storage engines based on its availability and its priority. When running in a native app context, Storage will prioritize using SQLite, as it’s one of the most stable and widely used file-based databases, and avoids some of the pitfalls of things like local storage and IndexedDB, such as the OS deciding to clear out such data in low disk-space situations. When running on the web or as a Progressive Web App, Storage will attempt to use IndexedDB, and local storage, in that order.

Ionic 2 storage store data in key/value pairs, the value may be a simple string or a complex JSON Object.

Step 1: 

ionic start local-storage blank

We don’t need to install the local storage plugin, as it defaults with the ionic app.

Step 2: We need to import storage module in app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
.....
import { IonicStorageModule } from '@ionic/storage';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicStorageModule.forRoot(),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
..
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

 

Step 3: Add the following code in home.ts, The storage class have two methods storage.set and storage.get method to set and retrieve the data. We have to import the storage service.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public storage: Storage) {}

  setData(){
   this.storage.set('name', 'Ashoka');
  }
  getData(){
    this.storage.get('name').then((val) => {
      console.log('Your name is', val);
    });
  }

}

 

Step 4: Add the following code in home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="setData()">Set Data</button>
  <button ion-button (click)="getData()">Get Data</button>
</ion-content>