Basic Concept to Implement Ionic Storage V3 in Ionic 6

In this blog, we will discuss the basic concept to implement ionic storage V3 in Ionic 6. Before that, we need to understand Ionic storage. Here we go.

What is Ionic storage?

Storage is an easy way to store key/value pairs and JSON objects. Storage uses a variety of storage engines underneath, picking the best one available depending on the platform. On the date of 23 march, 2021 ionic introduced his new version of ionic storage that is Ionic Storage v3, an open-source library that offers an easy way to store simple data in Ionic apps. It is useful for building single code-base apps on iOS, Android, and the Web, while automatically using the best storage engine available on the platform the app is running on. Several years ago, when the ionic storage version is v2 then it only based on the project of the angular type.

What’s new is Ionic storage v3:

1. v3 adds support for React, Vue, or any JavaScript project. The existing Angular implementation is still there.
2. Ionic Storage v3 replaces ready() with a cleaner create a () function which instantiates the database immediately.
3. for encryption support, ionic also added integration with ionic’s Secure Storage premium solution. There’s a new setEncryptionKey method available for security-sensitive use cases using Secure Storage.
4. when data is stored, it's encrypted at rest on iOS and Android using 256-bit AES. When paired with Identity Vault, Ionic’s mobile biometrics solution, you can securely manage encryption keys and lock down data access using the app user’s biometrics (fingerprint scan and facial recognition).
5. For apps that need a single codebase running on iOS, Android, and the web, developers can integrate with Ionic Storage, a Key/Value library that provides a consistent API across platforms, though developers will need to use this API instead of writing SQL queries as there is no SQL engine available in browsers today.

Finally, Ionic closed over 30+ issues to improve the overall stability and health of the plugin.

Implementation:

If you creating a new project then open your terminal and paste this command, hit enter.

npm install @ionic/storage-angular

If you want to your existing project then paste these two commands, hit enter.

# Remove Ionic Storage v2

npm uninstall @ionic/storage

 

## Install v3

npm install @ionic/storage-angular

I am working on the angular-based ionic project but I will show how to implement nation storage in angular, react, and Vue codebase types.

With React or Vue js:

import { Storage } from'@ionic/storage';

const store = new Storage({/* config */});

await store.create();

With Angular js:

First, add your NgModule declaration in src/app/app.module.ts or the module for the page you'll use the storage library in, and add IonicStorageModule as an import:

Next, inject Storage into a component:

Output: Hence the output is,

Output is in a JSON object

Conclusion:

All the above code is tested by me and it is perfectly working. Hope you will enjoy the code using in your Angular, React, and Vue apps. This is very important in Ionic app development. Please share your valuable views in the comment section below. See you on my next blog.