This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Using the LocalForage library for offline storage with Angular

1:39 Angular 1.x lesson by

The angular-localforage library makes simple offline storage easy.

Get the Code Now
click to level up comment guidelines


The angular-localforage library makes simple offline storage easy.


nice video!

can you copy another, little more complex example? maybe when using it on a CRUD app, and just activate this when the user refresh the page but didn't save?


In reply to

Yup, planning on a couple more examples right after I get home from ngEurope.

In reply to Horacio

awesome!, thanks!

In reply to John

Is there a way to encrypt the data i store using localForage thru angular

The easiest way to set up offline support in Angular is to use the localForage library, which gives you a directive called local-forage. I'm going to parse in a user saying that I want the store for offline use.

Meaning when I refresh my page and I type "John Lindquist," I go in and I check my key value parse table here, you can see I have a key with user that has an object of John Lindquist to a first name and last name.

If I refresh the page, I already have John and Lindquist populated without me typing anything because I grabbed it from my index DB, and populated it for me.

To get the localForage library, go ahead and do bower install angular-localforage, or Google localForage with Angular. You'll get three things.

One is the Angular library. The second is the localForage library, and the third is the wrapper library to make it angularized, so you don't have to do scope apply and things like that.

Once you have those three things loaded in, all you need to do is make sure and include the localForage module in one of your modules.

Other than that, to use a directive, you don't need any controllers. You don't need to configure anything. You can go ahead and set it up using the local-forage directive.

As soon as you type something, such as fill harmonic, and then I refresh the page, you can see that it saved that. If my site were offline, it would go ahead and display that again for me.

This is a very basic use case. We'll go ahead and cover more in doing this through the code and getting in setting values like that in future videos.

Joel's Head
Why are we asking?