javascript - 使用 Angular 本地存储模块将元素存储在本地存储中的数组中

Question

我只需要在 localStorage 中存储一个数组，并不断向该数组添加元素，这样我就可以在我的应用程序中检索该存储的数组。这对 Angular Local Storage Module 来说一定是一件非常简单的事情但这让我很烦恼，我希望在这方面得到一些帮助。

以下是我使用 angular-local-storage 模块将 queries 存储到 localStorage 中的 Angular 代码:

.factory('QueryService', ['localStorageService', function(localStorageService) {
        var queries = [];
        var factory = {};

        factory.addQuery = function(query) {
            queries.push(query);

            localStorageService.set('queries', queries);
            return localStorageService.get("queries");
        };
        return factory;
    }])

每次我向 queries 数组添加查询时，我只会在结果中返回最后添加的元素。所以基本上，localStorageService.get("queries") 为我提供了添加到 queries 数组的最后一个元素。

有人能帮我理解为什么我只得到我添加到返回的 queries 数组中的最后一个元素吗？

编辑:在我将每个元素添加到 queries 数组后，我刷新浏览器。

Answer 1

通常你不能直接用localStorage存储数组。但是 angular-local-storage 会为您完成这项工作，如下所示:https://github.com/grevory/angular-local-storage/blob/ed422c04764d4981a48f4c40859d65087b1b9838/src/angular-local-storage.js#L119

回答您的问题的线索是您在添加元素后刷新浏览器，因此查询数组确实得到了清理。浏览器刷新实际上会清除所有 JavaScript 值， Controller 甚至整个 AngularJS 应用程序都会重新启动。

为了使您的代码正常工作，您必须在 Controller 的第一行中初始化查询数组:

.factory('QueryService', ['localStorageService', function(localStorageService) {
        var queries = localStorageService.get('queries') || [];
        var factory = {};

        factory.addQuery = function(query) {
            queries.push(query);

            localStorageService.set('queries', queries);
            return localStorageService.get("queries");
        };
        return factory;
    }])