使用按钮 angularjs 将 id 保存到本地存储

Question

我在我的项目中使用了最喜欢的按钮。这是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>

当我在 ItemPage.html 中单击第 1 项的心形按钮时，该按钮变为活动状态，当我再次导航到第 2 项的 ItemPage.html 时，该按钮已处于活动状态。在每个项目页面中，我都有 {{object.itemid }} 。我想将 itemid 添加到本地存储中，因此该按钮仅在为每个项目按下按钮时才处于活动状态。我从未使用过本地存储。有什么建议吗？在此先感谢。

Answer 1

安东尼，

Angular 服务是单例的，因此在应用程序的生命周期中只被实例化一次。这意味着它们非常适合跨控制器存储和共享数据。

本地存储

The localStorage object 存储没有过期日期的数据。关闭浏览器不会删除数据，次日、次周或次年可用。

因此，行为。打开多个网页将访问同一个本地存储，它本身就是一个单例。

不同之处在于，使用 Angular，每个打开的页面都有自己的应用程序实例。因此，每个网页都会有自己的服务实例。

解决方案

Here is the plunker

守则

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;

  };

}]);