nicht in der Lage, Daten zu speichern localStorage mit Angular

Question

Hallo Freunde Ich bin neu in eckigen und wollte eine einzelne Seite Anwendung erstellen.

Mein Code funktioniert gut, wenn Sie eine Liste von Produkten erstellen und wenn Sie auf Produkt klicken Ich lande zur Detailseite, die absolut gut funktioniert, aber jetzt möchte ich eine andere Liste zeigen, die schon gesehene Produkte zeigt.

Ich starrte die Lösungen zu graben, und kam mit einiger Idee ProductId in einigen Array zu schieben durch $routePrams verwendet, die fein arbeiten, bis der Benutzer die Seite neu zu laden, weil nach der Seite neu lädt all gespeicherten ProductId von Array verschwunden. Ich habe auch versucht, Daten zu speichern, zu localscheiterte aber und kam dann hier, um Hilfe zu suchen ... Bitte überprüfen Sie meinen Code unten und bitte vorschlagen, wenn sie eine andere Möglichkeit ist

controller.js diese Scheiße zu knacken

var myApp = angular.module('assignment', ['ngRoute']); 



var viewedProducts = []; // created a global empty array 
var uniqueNames = []; // created second global empty array 


myApp.config(['$routeProvider',function($routeProvider) { 
    $routeProvider.when('/',{ 
     templateUrl : 'list/list.html' 
    }) 
    .when('/:productId',{ // Passing productId 
    templateUrl : 'detail/detail.html' 
    }) 

}]) 

myApp.service('myData', ['$http', function($http){ 
    return{ 
    itemList : function(){ 
     return $http({'method': 'GET', 'url' : 'js/data.json'}).then(function(response){ 
     return response.data; 
     }, function(data){ 
     console.log(data); 
     }) 
    } 
    } 
}]) 

myApp.controller('itemData', ['$scope','$http', 'myData', function($scope, $http, myData){ 

    myData.itemList().then(function(data){ 
    $scope.items = data; 

    }, function(){ 
    console.log(data); 
    }) 



}]) 

myApp.controller('details', ['$scope', '$http', '$routeParams', 'myData', function($scope, $http, $routeParams, myData){ 
    $scope.product = $routeParams; // Getting Product Id using $routeParams 


    myData.itemList().then(function(data){ 


    angular.forEach(data, function(value, key){ 

     if(value.productId == $routeParams.productId) { 
     $scope.product = value; 


     viewedProducts.push(value.productId); 

     /*Trying to same data to localStorage*/ 
     localStorage.setItem('viewedItems', viewedProducts); 
     var getViewed = localStorage.getItem('viewedItems'); 
     getViewed = getViewed.split(',') 

     angular.forEach(getViewed, function(value, key){ 
      if(uniqueNames.indexOf(viewedProducts[key]) === -1) { 
       uniqueNames.push(viewedProducts[key]); 
      } 
     }); 
     } 

    }); 

    }); 

}]) 

myApp.controller('viewedProducts', ['$scope', '$http', '$routeParams' , 'myData', function($scope, $http, $routeParams, myData){ 

$scope.viewed = []; 

    myData.itemList().then(function(data){ 
    //$scope.items = data 
    angular.forEach(data, function(datavalue, datakey){ 

     angular.forEach(uniqueNames, function(value, key){ 
     if (datavalue.productId == uniqueNames[key] && datavalue.productId !== $routeParams.productId) { 
      $scope.viewed.push(datavalue); 
     } 
     }); 

    }); 
    }) 

}]) 

Answer 1

$ window.localStorage.setItem (Schlüssel, Wert)

local nur Strings unterstützt, so dass Sie mit JSON.stringify das Array stringify müssen().

Hier ist ein in-depth solution

oder Sie können ein Winkelmodul für diese wie angular-localstorage

Answer 2

Seine verwenden, da nur local String als Werte unterstützen.

Daher sind die Daten verwenden

zum Speichern

localStorage.setItem('viewedItems', JSON.stringify(viewedProducts)); 

Und für retriving die Daten verwenden

var getViewed = JSON.parse(localStorage.getItem('viewedItems')); 

Answer 3

Auch konfrontiert ich ein ähnliches Problem wie dieses, und ich verwendet ngStorage, die beide $localStorage and $sessionStorage Dienste bieten.

Sie können definieren, wie diese

controller('savedata', function($scope, $localStorage) { 
    $scope.$storage = $localStorage.$default({ 
    x: 42 
    }); 
}); 

Hier ist die Plnkr

Hoffe, es funktioniert für Sie :)

Answer 4

aktualisiert Lassen Sie myData Service Nutzung von Speicher zu machen, überprüfen Sie bitte, Wenn das funktioniert,

myApp.service('myData', ['$http', '$window', '$q', '$timeout', function($http, $window, $q, $timeout) { 
    var storage = $window.localStorage; 

    return { 
     itemList: function() { 
      var deferred = $q.defer(), 
       list = storage.getItem('item-list'); 

      if (list) { 
       $timeout(function() { 
        deferred.resolve(angular.toJson(list)); 
       }); 
      } else { 

       $http({ 'method': 'GET', 'url': 'js/data.json' }) 
        .then(function(response) { 
          storage.setItem('item-list', angular.fromJson(response.data)); 
          deferred.resolve(response.data); 
         }, 
         function(data) { 
          console.log(data); 
          deferred.reject(data); 
         }); 
      } 

      return deferred.promise; 
     } 
    } 
}]);