CODEWITHSUNDEEP
angularjslocal-storage
Antonis
Antonis

Reputation: 195

Save id to local storage with button angularjs

i use a favorite button to my project. Here is a demo

script.js

angular.module("MyApp",[]);

service.js

angular
  .module("MyApp")
  .service("FavoriteService",[function(){

    //Favorites functions
    this.isLocalStorageEnable = function() {

        if(typeof (Storage) !== "undefined"){
            return true;
        }
        else{
            return false;
        }
    };

    this.isFavorite = function(scope){
        var fav = localStorage.getItem(scope.id);
        return fav === "1";
    };

    this.setFav = function(scope){
        localStorage.setItem(scope.id,"1");
    };

    this.deleteFav = function(scope){
        localStorage.removeItem(scope.id);
    };
  }]);

directive.js

angular.module("MyApp").directive("albumDirective",    
  ["FavoriteService", function(FavoriteService) {

    return {
      restrict: "AE",
      templateUrl: "AlbumDirective.html",
      replace: true,
      scope: {
        id: "=albumId"
      },
      link: function(scope)
      {
        scope.isLocalStorageEnable = FavoriteService.isLocalStorageEnable;
        scope.isFavorite = FavoriteService.isFavorite(scope);

        scope.markAs = function(type) {
          switch(type) {
            case true :
              FavoriteService.setFav(scope);
              break;
            case false : 
              FavoriteService.deleteFav(scope);
              break;

          }
          scope.isFavorite = type;
        }
      }

    };
  }]);

AlbumDirective.html

<button ng-click="markAs(!isFavorite)" ><i class="fa" ng-class="{'fa-heart' : isFavorite , 'fa-heart-o' : !isFavorite }"></i></button>

Itempage.html

<album-directive album-id="1"></album-directive>

When I click the heart button for in ItemPage.html for item 1 the button become active and when I navigate again to ItemPage.html for item 2 the button is already active. In each item page I have {{object.itemid}}. I would like to add the itemid to local storage so the button will be active only when the button pressed for each item. I never used local storage. Any suggestions?

Upvotes: 0

Views: 783

Answers (1)

Wilmer SH
Wilmer SH

Reputation: 1417

Antonis,

Angular services are singletons and therefore are instantiated only once through the life cycle of the application. Meaning that they are great for storing and sharing data across controllers.

Local Storage

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Hence, the behavior. Opening multiple web pages will access the same local storage, itself a singleton.

The difference is that with angular, every page that is open has its own instance of the application. Therefore each webpage will have it's own instance of the service.

Solution

Here is the plunker

The Code

angular.module("MyApp").service("FavoriteService",[function(){


  this.fav = 0;

  //Favorites functions
  this.isLocalStorageEnable = function() {

      if(typeof (Storage) !== "undefined"){
          return true;
      }
      else{
          return false;
      }
  };

  this.isFavorite = function(scope){
      return this.fav === 1;
  };

  this.setFav = function(){
      this.fav = 1;

  };

  this.resetFav = function(){
      this.fav = 0;

  };

}]);

Upvotes: 0

Related Questions