Using Capacitor Storage

Saving data within the application

Within this case study, we’ll be using the Capacitor Storage plugin to manage the persistence of data such as favorite movies and saved searches.

Capacitor Storage relies on the following mechanisms:

• Browser local storage for PWAsProgressive Web Apps
• The UserDefaults on iOS
• The SharedPreferences on Android

The Storage plugin provides a simple key-value data store mechanism and is not intended for more “serious” or enterprise-level data requirements.

When using the Capacitor Storage (or similar key-value storage mechanisms such as Ionic Storage or LocalStorage), consider this to be a persistence mechanism for “lower-level” data (like a caching store).

Note: If you are looking to store important business-related data and/or require the ability to perform queries on that data, consider using a database such as MongoDB, Firestore, or SQLite instead.

Capacitor Storage works on String values, but can store more complex data structures, including Arrays and Blobs, simply by using JSON.stringify on the data object before saving it into Storage.

The API is fairly simple and should be familiar from the Data Storage chapter where we explored using Ionic Storage:

• The getmethod
• The setmethod
• The clearmethod
• The removemethod
• The keysmethod
• The migratemethod
• The removeOldmethod

We’ll make use of the get, set, and keys API methods in our custom storage service, which will simply provide asynchronous wrappers around the pre-existing Storage API methods we’ve chosen to use.

The StorageService

In the src/app/services/storage.service.ts StorageService class, we make the following amendments (highlighted):