How to Create Basic Ionic Storage CRUD Operations


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.


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.

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/ 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/ 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!


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!).


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.

Comments on How to Create Basic Ionic Storage CRUD Operations

  1. Zafer Bahadir says:

    It was very helpful. Thank you for the useful information.

  2. Mahen Nowzadick says:

    I cannot compile the code above, it says: “[ng] “export ‘List’ was not found in ‘@ionic/angular'” – using ionic 4.8.0

    1. fran fan says:

      getting the same error

    2. Juls says:

      rename List to IonList

      1. Yes thanks, changed it in the code as well!

  3. Rano Paimin says:

    Hi Simon & others.
    I have solution the List import problem.

    import { Platform, ToastController, List } from ‘@ionic/angular’;
    Change to this:
    import { Platform, ToastController, IonList } from ‘@ionic/angular’;

    @ViewChild(‘mylist’)mylist: List;
    Change to this:
    @ViewChild(‘mylist’)mylist: IonList;

    I hope this will solved the Problem.

  4. Mustafa says:

    How can we close all sliding items when we click button?

  5. Sascha says: I have the same issue, and can’t find any other solutions -do you see the same issue with your example app when you use the “Toggle device toolbar” in chrome dev tools?
    Thank you, greetings from Osnabrueck.

  6. Michael Wells says:

    Thanks Simon, great work as always-
    A typo in app/services/storage.service.ts

    Needs semicolon delimiters;
    export interface Item {
    id: number;
    title: string;
    value: string;
    modified: number;

    1. Thanks Michael, but afaik it was working without them – maybe you have different TSLint rules?

      1. Michael Wells says:

        I very well might, I just have whatever defaults came with VS Code. Speaking of which, the whitespace linting is a pain, it’s so picky about even blank lines containing spaces. Do you have a tutorial on VS Code setup for IONIC 4, with any tips on linter config, terminal config (powershell often fails with npm), and IONIC 4 developer / reference plugins? Would love to see that.

        1. Hmm sounds like a good idea!!

  7. Raif Onvural says:

    Great tutorial, thank you.
    All works great except update.. I can not update an item

Leave a Reply

Your email address will not be published. Required fields are marked *