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

How to save persisting data in angular route service even on refresh?

本文关键字：存在 保存 路由 服务 数据 刷新      更新时间：2023-09-26

所以我基本上是使用$route服务在角度的 2 个页面之间传输数据，而不是使用 url 参数。

我通过第一页在第二页上获得了发送到的数据，但是当我刷新第二页时，数据丢失了！

我

该如何解决这个问题，我不能使用 url 参数，因为数据将具有许多文本字段并且还将具有数组。

我已经在使用服务来传递数据，但服务数据在刷新后不会保留。

我

不想制作数据库，因为它不切实际，我只想让这些数据保留在客户端计算机上。

您可以使用

localStorage来持久保存数据：

普伦克

<!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>

服务始终是在控制器之间存储数据的最佳方式。服务在整个应用程序生命周期中持久保存数据，因此我们可以创建一个简单的服务，如下所示：

数据缓存服务 

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 个控制器之间无缝传递数据。

您可以从本文中获取有关服务和工厂的详细信息。

相关文章：