localStorage in Ionic 3

Multi-project and conflict-free usage of localStorage with a custom provider

Problem

Instant preview in the Browser during development through ionic serve is one of the major upside for developers when using Ionic to build apps. But when you work on multiple apps and use localStorage to store things like access tokens and user data, things quickly become difficult to handle. Because during development ionic serves all apps from the same domain, localhost:8000 , there will be a conflict between multiple projects.

When you try to retrieve a localStorage key called accessToken in Project 2 has been previously set by Project 1, strange things will happen if you use it. This means

• having to clear localStorage when working on multiple apps in parallel
• having to clear the app anytime a user changes environments

This is inconvenient when switching between projects for quick fixes.

Solution

We will create a Provider that seamlessly uses a prefix for setting and getting localStorage keys. As an additional benefit, the Provider will also handle serialization and deserialization for storing and retrieving Objects.

The prefix will be project-specific as well as environment specific. We talked about A Simple Way to Use Environment Variables in Ionic 3 in a previous article.

Implementation

1. Generating a conflict-free localStorage key

To separate data for each project and each environment, we’ll use a combination of values as the actual localStorage key. So if you build Your Awesome App for the staging environment and want to save the key currentUser, what would be written into the localStorage would look like this: yourawesomeapp-stagingಠ_ಠcurrentUser.

As covered in the article mentioned above, we use a constants Provider, that would also hold our localStorage key. The relevant part looks like this.

2. The localStorage Service

First, let’s create a basic service that stores the reference to the global localStorage object.

Next, we create a set function that looks at the type of value parameter, automatically stringifying objects.

To set a value, use it as this.storageService.set('currentUser', { id: 1, name: 'Jo' }); after injecting it. This will set the key yourawesomeapp-stagingಠ_ಠcurrentUser.

Writing is just half of it, next we’ll write our reading method which will retrieve the key and parse them appropriately.

And that’s it. You can use it like this: this.storageService.get('currentUser'); to retrieve your data and even set a default value as a second parameter: this.storageService.get('currentUser', new User());

Here’s the whole Service for reference, including a delete method.