How to save data in Ionic Framework

Almost all mobile applications need to save different type of data in local storage or cache. It is true for Android native app, iOS native app and even hybrid cordova app. Today I’ll show you, how to save data in Ionic Framework in local storage.

It will take about 15 minutes to complete the project. After finishing the project you will be able to save and get both Json Object and plain string data from local storage.

Create a new application :

Move to your application’s root folder and add native storage cordova plugin:

Make it available in your app.module.ts file:

Create a new provider:

Open the provider and add following code:

Above provider can save and fetch both json object and primitive data types.

Create a new page named home:

Don’t forget to add page-name (home) in declarations and entryComponents arrays in app.module.ts file; Add it as root page in app.component.ts file.

Now go to your Home page (home.ts) and inject the storage dao through constructor

Now let’s save and get strings in your constructor.  For simplicity, we’ll just output the result in console.

Save String

Get String

Save Object:

Get Object:

You can remove a single key value:

Or delete all data from your application:

Now save and run the app to see the result.