Хранение элементов в массиве в локальном хранилище с использованием модуля локального хранилища Angular

Мне просто нужно сохранить массив в localStorage и продолжать добавлять элементы в этот массив, чтобы я мог получить этот сохраненный массив в своем приложении. Это должно быть очень просто сделать с модулем локального хранилища Angular, но это меня поразило немного беспокоит, и я надеюсь получить некоторую помощь в этом.

Ниже приведен угловой код, который я использую для хранения queries в localStorage с использованием модуля angular-local-storage:

.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?

EDIT: После каждого элемента, который я добавляю в массив queries, я обновляю браузер.


javascript arrays angularjs local-storage angular-local-storage
person skip    schedule 09.10.2014    source источник
comment
Модуль AngularJS localStorage автоматически stringify и parse создает для вас ваш массив. Насколько я понимаю, localStorage в настоящее время поддерживает только строки. Поэтому необходимо преобразование (обычно с использованием JSON.stringify и JSON.parse). Я написал это в предыдущем ответе (вне из AngularJS). Не уверен, что готовый модуль покрывает это для вас или нет...   -  person War10ck    schedule 09.10.2014
comment
Что касается вашего редактирования, вы обновляете браузер до или после сохранения содержимого в localStorage?   -  person War10ck    schedule 09.10.2014
comment
@SnareChops & @War10ck: Возможно ли, что обновление браузера между добавлением новых элементов в массив queries очищает массив queries?   -  person skip    schedule 09.10.2014
comment
@War10ck: Я не уверен в этом, позвольте мне тоже попробовать.   -  person skip    schedule 09.10.2014
comment
@War10ck: Да, мне нужно сделать это, прежде чем добавлять каждый элемент в массив.   -  person skip    schedule 09.10.2014
comment
Не должны var запросы = localStorageService.get (запросы);   -  person smk    schedule 09.10.2014
comment
В ответ на ваш вопрос выше в комментариях да, это вполне возможно. Если вы хотите, чтобы в массиве queries хранились все данные (старые и новые), вам нужно сначала попытаться получить массив запросов из localStorage. Если он существует, извлеките существующий контент в массив, обновите массив и поместите все содержимое обратно в localStorage. Если его нет в localStorage (указывая, что это первая итерация процесса), создайте массив, заполните новое значение и поместите его в localStorage. Для всех последующих запросов вам нужно будет повторить первый шаг.   -  person War10ck    schedule 09.10.2014

Ответы (1)


arrow_upward
3
arrow_downward

Обычно вы не можете хранить массивы напрямую с помощью localStorage. Но angular-local-storage делает это за вас, как показано в этой строке: js#L119" rel="nofollow">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;
    }])
person DanEEStar    schedule 09.10.2014