3

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

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

4

1 回答 1

4

正如评论所说，服务和工厂都有能力做到这一点。我通常像您建议的那样使用 localStorageService 来处理这个问题。首先，在 angularJS 之后，但在 app.js 之前，在 index.html 中加载本地存储模块。

<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]);
  })();

我在脚本投入生产之前将它们缩小，所以我使用依赖注入，特别是使用 $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 具有相当高的学习曲线，但它是可用的最强大的前端软件套件之一。

于 2015-10-21T18:03:22.187 回答