將ID保存到本地存儲中，並使用按鈕angularjs

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按鈕被激活，當我再次導航到ItemPage.html項目2按鈕已經active.In每個項目頁面我都有{{object.itemid}}。我想將itemid添加到本地存儲中，因此只有當按鈕按下每個項目時，按鈕纔會處於活動狀態。我從來沒有使用本地storage.Any建議？謝謝先進。

Answer 1

安東尼，

角服務是單身，因此通過應用程序的生命週期被實例化一次。這意味着它們非常適合跨控制器存儲和共享數據。

本地存儲

The localStorage object店無到期日的數據。瀏覽器關閉時數據不會被刪除，並且將在第二天，一週或一年內提供。

因此，行爲。打開多個網頁將訪問相同的本地存儲，本身是一個單身。

區別在於，使用角度，每個打開的頁面都有自己的應用程序實例。因此，每個網頁都會擁有自己的服務實例。

解決方案

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; 

    }; 

}]);