app.controller angularJS에서 데이터를 저장, 업데이트 및 삭제합니다.

Question

현재 제가 작업하고있는 자바 스크립트로 고심하고 있습니다. 그래서 간단한 웹 응용 프로그램을 가지고 있으며 다음은 AngularJS 항목입니다.

app.filter('startFrom', function() { 
return function (input, start) { 
    if (input) { 
     start = +start; 
     return input.slice(start); 
    } 
    return []; 
}; 

});

app.controller('MainCtrl', ['$scope', 'filterFilter', function ($scope, filterFilter) { 
$scope.items = ["name 1", "name 2", "name 3" 
]; 

$scope.addLink = function() { 
    $scope.errortext = ""; 
    if (!$scope.newItem) {return;} 
    if ($scope.items.indexOf($scope.newItem) == -1) { 
     $scope.items.push($scope.newItem); 
     $scope.errortext = "submitted"; 
    } else { 
     $scope.errortext = " in list"; 
    } 
}; 

그래서 나는 이것들을 가지고 있고 그것의 html쪽에 항목 목록을 표시합니다. 사용자는 항목 배열에서 항목을 추가 및 삭제할 수 있습니다. 질문. 배열에서 항목을 추가하거나 삭제 한 사용자가 페이지를 다시로드 한 후에도 편집 된 목록을 볼 수 있는지 확인하려면 어떻게합니까? 누군가 그것을 다루는 방법을 제안 할 수 있습니까? 쿠키에 저장할 수 있고 각 추가/삭제 작업 후에 업데이트 할 수 있습니까? 그렇다면 어떻게해야합니까?

감사

UPDATE

는 : 는 그래서 스크립트를 변경하지만 여전히 작동하지 않는 것 같습니다.

var app = angular.module('App', ['ui.bootstrap']); 

    app.filter('startFrom', function() { 
     return function (input, start) { 
     if (input) { 
     start = +start; 
     return input.slice(start); 
     } 
     return []; 
     }; 
    }); 

    app.factory('ItemsService', ['$window', function($window) { 
    var storageKey = 'items',_sessionStorage = $window.sessionStorage; 
    return { 
    // Returns stored items array if available or return undefined 
    getItems: function() { 
     var itemsStr = _sessionStorage.getItem(storageKey); 

     if(itemsStr) { 
      return angular.fromJson(itemsStr); 
     }      
    }, 
    // Adds the given item to the stored array and persists the array to sessionStorage 
    putItem: function(item) { 
     var itemsStr = _sessionStorage.getItem(storageKey), 
     items = []; 

     if(itemStr) { 
      items = angular.fromJson(itemsStr); 
     } 

     items.push(item); 

     _sessionStorage.setItem(storageKey, angular.toJson(items)); 
    } 
} 

}]);

app.controller('MainCtrl', ['$scope', 'filterFilter', 'ItemsService', function ($scope, filterFilter, ItemsService) { 
$scope.items = ItemsService.get($scope.items) 

$scope.addLink = function() { 
    $scope.errortext = ""; 
    if (!$scope.newItem) {return;} 
    if ($scope.items.indexOf($scope.newItem) == -1) { 
     $scope.items.push($scope.newItem); 
     $scope.errortext = "Submitted"; 
     $scope.items = ItemsService.put($scope.items) 
    } else { 
     $scope.errortext = "Link in the list"; 
    } 
}; 

$scope.removeItem = function(item) { 
    $scope.items.splice($scope.items.indexOf(item), 1); 
    $scope.items = ItemsService.put($scope.items) 
    $scope.resetFilters; 
}; 

사용자가 모든 항목이없는 경우는 기본 $ scope.items = [ "이름 1", "이름이", "이름을 사용합니다 있는지 확인하기 위해 어떻게하고 문제를 해결하는 방법에 어떤 도움 삼"]; ?

Answer 1

$cookies을 사용하는 간단한 get/set 서비스를 만들 수 있습니다.

angular.module('myApp') 
    .factory('ItemsService', ['$cookies', function($cookies) { 
    var cookieName = 'items' 
    return { 
     get: function(defaults) { 
     return $cookies.get(cookieName).split(',') || defaults 
     }, 
     put: function(items) { 
     var expireDate = new Date() 
     expireDate.setDate(expireDate.getDate() + 1); 
     $cookies.put(cookieName, items.join(','), { expires: expireDate }) 
     } 
    } 
}]); 

는 컨트롤러와 (있는 경우) $cookies에 저장 편집 된 목록을 얻을 수있는 주요 기능

$scope.items = ItemsService.get($scope.items) 

에 ItemsService을 포함,에 의해 addLink()에 목록을 저장 : 그것은 이렇게 될 수 있습니다

ItemsService.put($scope.items) 

Answer 2

나는 여기에 @davidkonrad의 대답을 sessionstorage를 사용하여 확장하고 싶습니다. sessionStorage를 사용하는 것이 당신의 유스 케이스에 가장 적합하기 때문에.

angular.module('myApp') 
    .factory('ItemsService', ['$window', function($window) { 
    var storageKey = 'items', 
     _sessionStorage = $window.sessionStorage; 

    return { 
     // Returns stored items array if available or return undefined 
     getItems: function() { 
      var itemsStr = _sessionStorage.getItem(storageKey); 

      if(itemsStr) { 
       return angular.fromJson(itemsStr); 
      }   

      return ['name1', 'name2', 'name3']; // return default value when there is nothing stored in sessionStore     
     }, 
     // Adds the given item to the stored array and persists the array to sessionStorage 
     putItem: function(item) { 
      var itemsStr = _sessionStorage.getItem(storageKey), 
      items = []; 

      if(itemStr) { 
       items = angular.fromJson(itemsStr); 
      } 

      items.push(item); 

      _sessionStorage.setItem(storageKey, angular.toJson(items)); 
     } 
    } 
}]);