In BlogPost, Fair Job Offer Project, Javascript

How To Use LocalStorage in AngularJS

So when I started the Fair Offer Project to help people fairly compare their job offers, I decided to start by saving data locally.

Thus, I wouldn’t have to worry about adding complexity with a database backend.

angular-factories-services-providers

This way I could focus on only the front-end tooling but still save job offer information.

Step 1 – Find a LocalStorage plugin to use

The first step was to find an Angular library that would let me hook into local storage. I eventually found angular-local-storage.

I’ve never used it but it had 2000+ stars on GitHub and code commits within the last several months. Hence, I thought it looked like it was being well-maintained.

So I decided it was a reliable library to use.

Step 2 – Configure bower.json and install

The next step was to add the file locally via bower.

bower.json

So I added the file below in bower.json.

app.js

I also needed to add a require statement to incorporate the dependency properly.

I also needed to add a reference to LocalStorageModule to the list of angular dependencies.

Step 3 – Make the Angular controller aware of the dependency

Finally, to polish off the install, I needed to inject the dependency into the Angular controller.

Step 4 – Add a function to save to LocalStorage

Now, I could add some code to the Angular controller to enable a saveLocal function.

This function allowed me to save data to local storage in the browser.

Step 5 – Get the saveLocal function working

The last step was to add it to the HTML template view.

Summary

Enabling saving data to local storage in the browser was a matter of finding a well-maintained Angular library. Then I just had to get it working with the front end tooling with webpack.

Recent Posts