AngularJSでvmを使用してデータを配列に格納

Question

データを配列に格納していますが、ページを更新するとページ上のデータが消えます。

これは私のJSコードです：

function VideoController() { 
    var vm = this; 

    vm.videos = []; 

    vm.addVideoUrl = function(text) { 
    vm.videos.push(angular.copy(text)); //HOW I AM TRYING TO SAVE DATA INTO MY ARRAY, VIDEOS 
} 

} 

Answer 1

あなたは、コントローラの新しいインスタンスをリフレッシュするたびに作成されます。そのため、配列は空になるように再初期化されます。

ブラウザのローカルストレージを使用して、データの保存と取得を行うことができます。

Answer 2

$cookies（https://docs.angularjs.org/api/ngCookies/service/$cookies）を使用すると、データを一時的に保存できます。デフォルトでは有効期限があるため、ローカルストレージよりも優先されます。

Answer 3

localstorageまたはsessionstorageを使用できます。hereの相違点を参照してください。

I：

次の例では、あなたのケース

angular.module('myApp', []) 
    .controller('myCtrl', ['$scope', function($scope) { 
    var saveVideosToStorage = function(){ 
     localStorage.setItem('videos', angular.toJson($scope.videos)); 
    } 

    var init = function() { 
     //load video array from localstorage/sessionStorage 
     var videos = angular.fromJson(localStorage.getItem('videos')); 
     if (!(videos instanceof Array)) { 
      //videos has been corrupted 
      $scope.videos = []; 
      saveVideosToStorage(); 
     } 

     $scope.videos = videos; 
    } 

    var addVideoUrl = function(text) { 
     $scope.videos.push(angular.copy(text)); //HOW I AM TRYING TO SAVE DATA INTO MY ARRAY, VIDEOS 
     saveVideosToStorage(); 
    } 

    $scope.addVideoUrl = addVideoUrl; 
    init(); 
    }]); 

、ここ

<div ng-repeat="video in videos track by $index">{{video}}</div> 
    <input ng-model="videoUrl" type="text"/> 
    <input type="button" ng-click="addVideoUrl(videoUrl);"> 

とはplunker

NOTEあるマークアップのためにそれを使用する方法を示します中古%scopeの代わりにvar vm = this

私は理解しやすいlocalStorage、sessionStorage、cookieについて説明しましたhereを参照してください。