使用Angular Local Storage Module在本地存储中将元素存储在数组中

Question

我只需要在localStorage存储一个数组并继续向该数组添加元素，这样我就可以在我的应用程序中检索存储的数组。 这对于Angular Local Storage Module来说一定非常简单，但它让我感到麻烦，我希望能得到一些帮助。

以下是我使用的角度代码，用于使用angular-local-storage模块将queries存储到localStorage ：

.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直接存储数组。 但是角度本地存储对你有用，如下所示： https ： //github.com/grevory/angular-local-storage/blob/ed422c04764d4981a48f4c40859d65087b1b9838/src/angular-local-storage.js#L119

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

要使代码工作，您必须在控制器的第一行初始化查询数组：

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