如何在刷新時保存角度路由服務中的持久數據？

Question

所以我基本上使用$ route服務而不使用url params在兩個頁面之間傳輸數據。

我在第一頁上獲得了第二頁發送的數據，但是當我刷新第二頁時數據丟失了！

我如何解決這個問題，我不能使用url params，因為數據將包含許多文本字段，並且還將具有數組。

我已經在使用服務來傳遞數據，但刷新后服務數據不會持久存在。

我不想制作數據庫因為它不實用我只是希望數據留在客戶端機器上。

Answer 1

您可以使用localStorage來保存數據：

Plunker

 <!DOCTYPE html> <html ng-app="app"> <head> <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script> <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script> <script> angular.module('app', [ 'ngStorage' ]). controller('Ctrl', function( $scope, $localStorage ){ $scope.$storage = $localStorage.$default({ x: 42, y: 1 }); }); </script> </head> <body ng-controller="Ctrl"> <button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button> + <button ng-click="$storage.y = $storage.y + 1">{{$storage.y}}</button> = {{$storage.x + $storage.y}} </body> </html>

Answer 2

服務始終是在控制器之間存儲數據的最佳方式。 服務在應用程序生命周期中持久保存數據，因此我們可以創建一個這樣的簡單數據：

DataCacheService

angular.module('dataPassingDemo').service('DataCacheService', DataCacheService);

function DataCacheService () {
  var self = this,
      _cache = {};

  self.get = get;
  self.set = set;

  function get (key) {
    if (angular.isDefined(key) && angular.isDefined(_cache[key])) {
      return _cache[key];
    }

    return false;
  }

  function set (key, value) {
    if (angular.isDefined(key)) {
      _cache[key] = value;
    }
}

然后，給出2個控制器：

控制器1

angular.module('dataPassingDemo').controller('Controller1', Controller1);

function Controller1 (DataCacheService) {
  var vm = this;

  vm.setName = setName;

  function setName (name) {
    DataCacheService.set('name', name);
  }
}

控制器2

angular.module('dataPassingDemo').controller('Controller2', Controller2);

function Controller2 (DataCacheService) {
  var vm = this;

  vm.name = DataCacheService.get('name');
}

您可以看到我們能夠無縫地在兩個控制器之間傳遞數據。

您可以從本文獲得有關服務和工廠的更多信息。

如何在刷新時保存角度路由服務中的持久數據？

問題描述

2 個解決方案

解決方案1
1 2016-02-17 17:15:57

解決方案2
0 2016-02-17 16:46:09

如何在刷新時保存角度路由服務中的持久數據？

問題描述

2 個解決方案

解決方案1 1 2016-02-17 17:15:57

解決方案2 0 2016-02-17 16:46:09

解決方案1
1 2016-02-17 17:15:57

解決方案2
0 2016-02-17 16:46:09