app.controller angularJSからのデータの保存、更新、削除

Question

私が現在取り組んでいるJavascriptで苦労しています。だから私は、単純なWebアプリケーションを持っているし、次は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」、「名2」を使用することを確認するために、どのようにすべてのヘルプ、「名前3 "]; ？

Answer 1

$cookiesを使用して簡単な取得/設定サービスを作成できます。これは、このようなことができます：

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

はでaddLink()に$cookiesに保存され、編集リスト（もしあれば）を取得し、リストを保存するために

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

あなたのコントローラで、メイン機能でItemsServiceを含めます

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