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 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 storage store data in key/value pairs, the value may be a simple string or a complex JSON Object.

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

ionic start local-storage blank
ionic generate service localStorage

Step 2: We have created local Storage service or provider. , The storage class have few methods storage.set and storage.get method to set and retrieve the data. Create a folder called provider and move localStorage  service in provider folder and add following code in app/provider/local-storage.service.ts file

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LocalStorageService {

  get length() {
    return localStorage.length;
  }

  clear() {
    localStorage.clear();
  }

  getItem(key: string): any {
    return JSON.parse(localStorage.getItem(key));
  }

  removeItem(key: string): void {
    localStorage.removeItem(key);
  }

  setItem(key: string, value: any): void {
    localStorage.setItem(key, JSON.stringify(value));
  }

}

Step 3: Add the following code in home.ts We have to import the storage service.

import { Component, OnInit } from '@angular/core';
import { LocalStorageService } from '../providers/local-storage.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  name: String;
  localName: String;

  constructor (private locaStorage: LocalStorageService) {}

  ngOnInit() { }

  setData() {
    this.locaStorage.setItem('name', this.name);
   }

   getData() {
     this.localName = this.locaStorage.getItem('name');
   }

}

Step 4: Add the following code in home.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Local Storage
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <ion-input type="text" [(ngModel)]="name" placeholder="Enter String to set Local Storage"></ion-input>
     <ion-button size="small" (click)="setData()">Set Data</ion-button>
    <ion-button size="small" (click)="getData()">Get Data</ion-button>
    <p>
      Get LocalStorage Value : {{ localName }}
    </p>
  </div>
</ion-content>