Sharing Top Content from the Angular-sphere.

Learning Vue for Ionic/Angular Developers – Part 4

  • The Ionic Storage module wraps localForage and handles automatically setting the appropriate driver based on what is available.
  • The default configuration for the Ionic Storage API looks like this: – – The most important part of this config is the order of the drivers, this is what determines the preference of storage mechanisms.
  • Most of the rest of the API is just simple wrappers around the standard localForage functions: – – All the Ionic Storage module is doing is making sure that the storage has finished being instantiated properly by checking the class member.
  • We could just interface with localForage directly in our components, but if we want to set up something smart like Ionic’s Storage API, then it makes more sense to separate it out into its own service.
  • This is just a simplified version of the same code that the Ionic Storage API uses – it more or less functions in the same way.

In this tutorial, we create a service for Vue that wraps localForage to handle saving data in the best storage mechanism available.

Most applications will at some point require saving some kind of data that needs to be persisted across application reloads. Often, we want to make use of the local storage on the user’s device to do this. When using Ionic/Angular we can use Ionic’s built-in Storage API to easily interact with storage without needing to know what is happening behind the scenes – Ionic will automatically use the best storage mechanism available.

Once again, with Vue, we don’t have these luxuries out of the box. It’s up to us to decide what we want to use, and either install a library to do that or build our own solution.

In this tutorial, we are going to extend the Reddit application we built in the last tutorial to allow switching between multiple different subreddits. We will then save the user’s selection to storage so that upon revisiting the application their choice will be saved.

This tutorial will follow on from the previous tutorial. If you want to follow along step-by-step, you should complete that tutorial first. However, you could easily apply the concepts in this tutorial to any application, so it is not necessary to complete the previous tutorial if you do not want to.

Before we get into the code, we are going to talk a little theory. We are going to base our code on the Ionic Storage Module…

Learning Vue for Ionic/Angular Developers – Part 4