How to Create Basic Ionic Storage CRUD Operations

ionic-storage-crud

The Ionic Storage package is a great wrapper around the local storage or SQLite database inside your Ionic app, but when it comes to basic functionality there are not a lot of functions available.

Therefore we will create a simple app to demonstrate the basic CRUD (Create, Read, Update, Delete) functionalities for Ionic Storage on our key/value entries.

ionic-crud-simulator

This is of course just one example how to access and work with your data as you might store it differently and of course different information!

Starting our CRUD App

To get started we create a blank new Ionic app and generate a service where we will implement the CRUD functionalities. Also, since Ionic 4 you also need to add the storage plugin by yourself as it’s not included with the blank starter.

Are you ready to start learning?

Join the Ionic Academy

Finally, we add the SQLite Cordova plugin so Ionic Storage will use this database once deployed on your device. Otherwise it would use the localstorage of the browser but inside a native app this engine would be recommended.

For all of this simply run:

We also need to add the Ionic Storage package to the root of our app so open your app/app.module.ts and add:

That’s everything you need to add the Ionic Storage wrapper to your app!

CRUD Functions for Ionic Storage

Because we want to have all logic in one place we generated a new service previously from which we will perform all calls to the storage.

To give this example a bit more structure I also added a simple interface that describes an item with some basic fields. The important one is the ID here, which you normally also get from most API responses that will later help to identify certain objects that are stored!

Besides that our service only consists of the CRUD functions. In all of the functions we need to load the current values from the storage before working with them in order to have the most up to date values.

We could also keep the information inside a local variable and only store it back occasionally, but the approach here is a bit easier for the beginning and works totally fine.

In detail our functions are:

  • Create (addItem): Check the if we already have an array saved and append the new item or create an array with the new item and save it to the storage
  • Read (getItems): Simple return the information stored under our key
  • Update (updateItem): Grab all stored items, then iterate all of them and replace the one we want to update with the new one
  • Delete (deleteItem): Grab all stored items, then iterate all of them and only save back the ones where the ID is different from the item that we want to remove

All of our values are stored under the ITEMS_KEY which we only define once and simply use the constant from then on!

Now go ahead and change your app/services/storage.service.ts to:

There are many ways to perform different actions, we could use RxJS for some more filtering but writing the things out might help especially beginners to understand how to work with Ionic Storage.

Working with our Storage Service

We have set up all functionalities and now it’s time to see them in action!

To use our service we just need a simply class to call of these functions. Here we will keep the list of items but reload it once we make any changes.

I’ve added some comments inline where we could also call a push() or splice() on our list so we don’t have to reload it from storage. Anyway, if you don’t have super mach data stored the time it takes should be fine.

All we have to do inside our functions here is to make the appropriate call to our service and then perhaps display a little toast afterwards to show the user what happened.

Because we are returning promises we can simply use the then() block where we are sure the operation has finished and was written back to the storage! We will also get a nice code completion as we have added the return values inside our service which comes in super handy especially when you work together with other developers on different parts of your app.

There isn’t much other logic included in here so simply go ahead and change your app/home/home.page.ts to:

There is one part where we need to manually close the sliding items in order to keep them working afterwards. This might also change in the future as this Quick Win was created using an Ionic 4 beta!

Now finally we have to build a tiny view that incorporates all the functions we have added. We don’t need much, just some inputs to create a new item and then a list with sliding buttons that will reveal the update and delete functionality.

No magic in here so let’s finish our app/home/home.page.html like this:

You can now run your Ionic Storage CRUD app in the browser and if you inspect the app with the developers tools and open the application tab you can even drill down to find the information that is written to your storage!

ionic-storage-crud-browser

From this place you can also change or delete the information, but you need to reload your app in order to reflect those changes (this is not Firebase realtime!).

Conclusion

It’s certainly not hard to work with Ionic Storage if you respect the Promise flow and understand how your data is saved.

Just make sure the amount of data is not getting out of hand, and also images or files in generally shouldn’t be stored inside this storage. For this you can directly use the apps folder and simply keep a reference for later.

You can also find a vide version of this Quick Win below.

Tweet
Reddit
+1
Share38
Email
38 Shares