Using the LocalForage library for offline storage with Angular

Instructor: [00:00] 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.

[00:14] 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.

[00:30] 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.

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

[00:50] 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.

[01:03] 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.

[01:10] 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.

[01:18] 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.

[01:30] 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.