Question

我有一个搜索页面，用户输入搜索条件并显示搜索结果，当用户导航到另一个页面并返回此页面时，结果应该保持不变。

每个子模块都有自己的app.js和控制器，以及如何跨页面保存数据。我不太确定如何使用$ localStorage

Answer 1

正如评论所说，服务和工厂都具备这种能力。我通常使用像你建议的localStorageService来处理它。首先，在index.html AFTER angularJS中加载本地存储模块，但是在你的app.js之前。

<script src="/angular/angular.js"></script>
<script src="/lib/angular-local-storage.js"></script>
<script src="/app.js"></script>

接下来，在主模块的声明中包含LocalStorageModule作为依赖项。

angular.module('test',['LocalStorageModule']);

现在，使用以下命令在相关模块的声明文件中配置locaStorageService：

localStorageServiceProvider
  .setStorageType('localStorage');

总之，你的app.js文件应该类似于：

angular.module('test',['LocalStorageModule']);

  config.$inject = ['localStorageServiceProvider'];
  function config (localStorageServiceProvider) {
  localStorageServiceProvider
      .setStorageType('localStorage');
  }

  angular
  .module('test')
  .config(['localStorageServiceProvider', config]);
  })();

我在编写脚本之前将其缩小，因此我使用dependency injection，特别是使用$ inject语法。

在页面加载时从cookie加载查询的示例控制器，并在执行搜索时将查询保存到cookie中（$ scope.doSearch）：

(function () {

angular.module("pstat")
       .controller("homeCtrl", homeCtrl);

  homeCtrl.$inject = ['$log', 'dataService', 'localStorageService', '$http'];
   function homeCtrl ($log, dataService, localStorageService, $http) { {
     if (localStorageService.get("query")) { //Returns null for missing 'query' cookie
        //Or store the results directly if they aren't too large
        //Do something with your saved query on page load, probably get data
        //Example:
        dataService.getData(query)
        .success( function (data) {})
        .error( function (err) {})
     }
     $scope.doSearch = function (query) {
       vm.token = localStorageService.set("query", query);
       //Then actually do your search
     }
   })
}()

只要您的根URL没有更改，您就可以通过localStorageService在任何页面上使用您的查询或结果访问此cookie。如果您需要更多详细信息，请告诉我。

请注意，如果要在页面加载时自动执行此操作，则需要将控制器包装在Immediately Invoked Function Expression中。祝好运！ AngularJS具有相当高的学习曲线，但却是最强大的前端软件套件之一。

如何在角度JS中保持数据和模型

1 个答案: