使用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 ，请参阅此处的差异。

以下示例演示了如何将其用于您的案例

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);">

而这里是掠夺者

注意：

我使用%scope而不是var vm = this

我发现有关的localStorage，sessionStorage的和饼干的解释，很容易理解看它这里 。