角度を使用してlocalStorageにデータを保存できません

Question

こんにちは私は新しく角度があり、単一のページアプリケーションを作成したいと考えました。

製品のリストを作成して製品をクリックすると、コードが正常に機能しています。詳細ページに移動しますが、これは問題なく動作していますが、今は既に表示されている製品を表示する別のリストを表示します。

は私が解決策を掘るために見つめていたと後に保存された ProductIdは、アレイから消え、すべてのページをリロードするため、ユーザーがページをリロードするまで正常に動作している $routePramsを使用することによって、いくつかの配列に ProductIdをプッシュするためにいくつかのアイデアを思い付きました。私はまたのlocalStorageにデータを保存しようとしましたが、失敗して、助けを求めるためにここに来た...以下の私のコードを確認してくださいと

controller.js

このたわごとをクラックする他の方法は、彼らのであれば提案してくださいあなたはJSON.stringifyとあなたの配列を文字列化する必要があるので、

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（キー、値）

のlocalStorageのみ、文字列をサポートしています（）。ここで

はin-depth solution

であるかのlocalStorageが唯一の値として文字列をサポートするため、このようなangular-localstorage

Answer 2

そのため、角のモジュールを使用することができます。

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

を使用して、データをretrivingため

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

Answer 3

を使用しても私はこのような同様の問題に直面し、私は両方$localStorage and $sessionStorageサービスを提供するどのngStorageを使用するデータを格納するためのしたがって

。

あなたはここでは、この

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

と同じように定義することができPlnkr

はそれがあなたのために働くの希望です:)

Answer 4

を確認してください 、ストレージを利用するために、あなたのMYDATAサービスを更新しましたこの場合、

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; 
     } 
    } 
}]);