如何在刷新时保存角度路由服务中的持久数据？

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