не удалось сохранить данные на localStorage, используя Angular

Question

Приветствую вас, я новичок в угловом и хотел создать одностраничное приложение.

Мой код работает отлично при создании списка продуктов, и при нажатии на продукт я приземлюсь на страницу с подробной информацией, которая работает абсолютно нормально, но теперь я хочу показать другой список, который покажет уже просмотренные продукты.

Я смотрел выкопать решения и придумали какой-то идеей, чтобы подтолкнуть ProductId в некотором массиве с помощью $routePrams, который работает отлично, пока пользователь не перезагрузите страницу, так как после перезагрузки страницы все спасенные ProductId исчез из массива. Я также попытался сохранить данные LocalStorage, но не удалось, и тогда пришли сюда искать помощь ... Пожалуйста, проверьте мой код ниже, и пожалуйста, предложите, если их любой другой способ взломать это дерьмо

controller.js

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 строки, так что вам нужно stringify ваш массив с JSON.stringify().

Вот in-depth solution

или вы можете использовать угловой модуль для этого, как angular-localstorage

Answer 2

Its, потому что LocalStorage поддерживают только строки в качестве значений.

Следовательно, для хранения данных используют

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

И retriving данные используют

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

Answer 3

Даже я столкнулся с аналогичной проблемой, как это и я использовал ngStorage, который обеспечит как $localStorage and $sessionStorage услуги.

Вы можете определить его как этот

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