Question

我在项目中使用了喜欢的按钮。这是demo

的script.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);

};


 }]);

service.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;
    }

}

  };

  }]);

directive.js

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

AlbumDirective.html

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

Itempage.html

public class ClassA<GENERICTYPE extends TypeA>
{
    ...
}

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

Answer 1

Antonis，

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;

  };

}]);

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

1 个答案: