Implement Like In Web App With AngularJS And Local Storage

This blog will explain the concept and way to implement Like on a Web app, using AngularJS & LocalStorage.

Introduction

Local Storage is the awesome feature of the latest Browsers. The developer can use this feature to store some data into the Browser.

The data can be stored, using Key, value pair in the Local Storage and the value can be accessed, using Key.

 

The syntax to store into Local Storage is given below.

localStorage.setItem(likeKey, likeValue);

The syntax is given below to access the value from Local Storage.

var voting = localStorage.getItem(likeKey);

Now, I will implement the code for the storage of Like and accessing.

 

Write the code, given below into controller.

Save Likes.

controller.saveLikes = function (votingId) {
        var votingKey = votingId;
        var existingVoting = controller.getLikes(votingId);

        if (existingVoting === 'NaN' || existingVoting === null) {
            existingVoting = 0;
        }

        var vote = parseInt(existingVoting) + 1;
        localStorage.setItem(votingKey, vote);
        controller.getLikes(votingId);
    }

Access Likes from Local Storage.

controller.getLikes = function (votingId) {
       var votingKey = votingId;
       controller.getTotalLikes();
       var voting = localStorage.getItem(votingKey);

       if (voting === 'NaN' || voting === null)
           return 0;

       return voting;
   }

Get Total Likes from Local Storage:

controller.getTotalLikes = function () {
       controller.totalLikes = 0;

       for (var i = 0; i < localStorage.length; i++) {
           controller.totalLikes = controller.totalLikes + parseInt(localStorage.getItem(localStorage.key(i)));
       }
   }

Add the link, given below into index.html page. It will provide the URL, given below.

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

Now, call method into HTML partial page, as given below.

<div class="pull-right table-bordered"
ng-click="homeController.saveLikes(nitroItem.name)" style="cursor: pointer;width:50px; height:40px; background-color:#ededed;">
                           <div style="margin-top:8px; margin-left:8px;"><i class="fa fa-thumbs-o-up"></i> {{homeController.getLikes(nitroItem.name)}}</div>
                       </div>

Output

 

Conclusion

Local Storage provides the best way to store the data up to the local level. You can store the different types of data such as like counts, your wishlist, configuration settings etc.