我有一个搜索页面，用户在其中输入搜索条件并显示搜索结果，当用户导航到另一页面并返回此页面时，结果应该是持久的。
每个子模块都有自己的 app.js 和控制器，以及如何跨页面持久化数据。我不太确定如何使用 $localStorage
【问题讨论】：
标签： javascript angularjs persist angular-local-storage ng-storage
正如 cmets 所说，服务和工厂都可以做到这一点。我通常像您建议的那样使用 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]);
})();
我在脚本投入生产之前将其缩小，因此我使用 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 具有相当高的学习曲线，但它是可用的最强大的前端软件套件之一。
【讨论】：