Speichere die ID im lokalen Speicher mit der Taste angularjs

Question

Ich benutze einen Favoriten-Button zu meinem Projekt. Hier ist ein 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> 

Wenn ich für das Herz klicken in ItemPage.html für Punkt 1 der Button aktiv und wenn ich wieder für Artikel zu ItemPage.html Ebene 2 die Taste ist bereits active.In Jede Artikelseite habe ich {{object.itemid}}. Ich möchte die Artikel-ID zum lokalen Speicher hinzufügen, so dass die Schaltfläche nur aktiv ist, wenn die Schaltfläche für jeden Artikel gedrückt wird. Ich habe nie lokalen Speicher verwendet. Irgendwelche Vorschläge? Vielen Dank im Voraus.

Answer 1

Antonis,

Angular Dienste sind Singletons und daher nur einmal durch den gesamten Lebenszyklus der Anwendung instanziiert werden. Das heißt, sie eignen sich hervorragend zum Speichern und Freigeben von Daten über Controller hinweg.

Local Storage

The localStorage object speichert die Daten ohne Verfallsdatum. Die Daten werden nicht gelöscht, wenn der Browser geschlossen wird, und sind am nächsten Tag, in der nächsten Woche oder im nächsten Jahr verfügbar.

Daher das Verhalten. Das Öffnen mehrerer Webseiten wird auf denselben lokalen Speicher zugreifen, der selbst ein Singleton ist.

Der Unterschied ist, dass mit eckigen jede Seite, die geöffnet ist, eine eigene Instanz der Anwendung hat. Daher hat jede Webseite ihre eigene Instanz des Dienstes.

Lösung

Here is the plunker

Der Kodex

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; 

    }; 

}]);