Saving data locally with ionic framework 2

nativestorageSome time ago I published the TODO tutorial for Ionic framework version 2. But our application data is not persistent across app run. Once added, todo item will never be saved for later use. It’s not serious in real applications, so let’s add ‘save data’ feature. We’ll use Ionic Native and Cordova Native Storage plugin.

First of all, you’ll need to install the NativeStorage plugin:

Import NativeStorage Service in your ToDo Component imports section:

Now we’re able to call getItem and setItem of NativeStorage service. Let’s use them. We’ll save our todo list completely on each change. Modify ToDo Component class as following:

We’re converting the items list to JSON string before save. NativeStorage cannot save objects and arrays, so doing this we’re performing the conversion to the proper format for NativeStorage.

Now we have the ‘save todos’ feature. It’s time to implement to ‘load todos’. Change the ToDo Component constructor as following:

We’re using platform.ready promise because sometimes our constructor can be called earlier than Native Storage plugin be initialized. This behavior allows us to be sure that everything is in place.

That’s all. Now we have the complete save/load todos feature. It just works. But it’s a good idea to add the errors handling to the production app.

Download the source code for this tutorial: Download

2 thoughts on “Saving data locally with ionic framework 2”

  1. Hai,


    I want to know can we use the native storage to save bookmarks and favorite and may i get simple visualization this example.


    Thank you.

Leave a Reply

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