Ionic 4 | Storage Tutorial in Ionic using Native Storage Plugin

Storage of information on a user device is very important and required in almost every application. This information saved on a user device can be of any type including user sessions, profile details, user or application settings etc.

In Ionic application, we can store such information in WebView memory which remains even if the user closes application or clears app cache from the device. There are two easy ways for storage in the Ionic application:

1) Ionic’s @ionic/storage package with Cordova’s cordova-sqlite-storage plugin which is very easy to integrate and use. It can save key/value pairs and even JSON objects. Check Ionic’s storage package tutorial here.

2) Native Storage plugin with Cordova’s cordova-plugin-nativestorage plugin. This plugin uses Native storage of Android, iOS, and Windows which also makes it fast and can store more data.

In this article, we will focus on the tutorial for the second one.

Let’s start with a new Ionic 4 application

Create a new Ionic 4 app using CLI

Make sure you have the latest version on Ionic CLI installed. Create a new Ionic 4 Application with a blank template.

Install Native Storage Plugin

Now to install Cordova and Ionic Native plugin for Storage run following npm  commands

Add Storage in Module

Next, to use Storage Native plugin in the application, open app.module.ts file then import and add in providers array as shown below

Use Storage in Application

In home component, we will import the plugin then add in the class constructor, after that we can access storage methods to set, get, remove information.

Methods in Native Storage

Methods available in Native Storage service return promise. Following are the methods available in Native Storage to access data/information. Let’s check them and usage.

setItem(reference: string, value: any): Stores a value

getItem(reference: string): Gets a stored item

keys(): Retrieving all keys

 

remove(reference: string): Removes a single stored item

clear(): Removes all stored values.

 

Conclusion: Storage in an ionic application using @ionic/storage provides internal intelligence by selecting storage engines. That’s why we can also debug apps in browser as well but in the case of Native Storage plugin as native storage is accessed app need cordovas so testing in a real dive can only be done.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of