8

Как сохранить массив в localStorage?

32

Проблема с хранением объектов в localStorage

У меня есть следующий код, который работает без localStorage:

var names = new Array(); 
names[0] = prompt("Какое имя нового участника?");

Этот код функционирует корректно. Однако мне необходимо сохранить переменную в localStorage, и, похоже, я сталкиваюсь с трудностями. Я попытался сделать так:

var localStorage[names] = new Array();
localStorage.names[0] = prompt("Какое имя нового участника?");

Не совсем понимаю, где я ошибаюсь. Может ли кто-то помочь решить эту проблему?

5 ответ(ов)

16

localStorage поддерживает только строки. Для сохранения сложных типов данных, таких как массивы или объекты, используйте JSON.stringify() для сериализации данных перед их сохранением и JSON.parse() для десериализации при извлечении.

Пример использования:

var names = [];
names[0] = prompt("Введите имя нового участника?");
localStorage.setItem("names", JSON.stringify(names));

// Для извлечения данных
var storedNames = JSON.parse(localStorage.getItem("names"));

Также вы можете использовать прямой доступ для установки и получения значения:

localStorage.names = JSON.stringify(names);
var storedNames = JSON.parse(localStorage.names);

Таким образом, вы сможете корректно сохранять и извлекать массивы или объекты из localStorage.

1

localStorage и sessionStorage могут хранить только строки. Однако вы можете расширить стандартные объекты хранения, чтобы они поддерживали массивы и объекты. Для этого достаточно подключить следующий скрипт и использовать новые методы:

Storage.prototype.setObj = function(key, obj) {
    return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function(key) {
    return JSON.parse(this.getItem(key))
}

Теперь вы можете использовать localStorage.setObj(key, value), чтобы сохранить массив или объект, и localStorage.getObj(key), чтобы его извлечь. Точно такие же методы работают и с объектом sessionStorage.

Если вы просто используете новые методы для доступа к хранилищу, то каждое значение будет автоматически преобразовано в строку JSON перед сохранением и разобрано перед возвратом с помощью геттера.

0

Используйте JSON.stringify() и JSON.parse(), как предложено пользователем no! Это поможет избежать, хоть и возможно редкого, но потенциального проблемы с именем элемента, которое может содержать разделитель (например, имя элемента three|||bars).

0

Похоже, вы создали интересный пример работы с объектами и их сохранением в хранилище. Ваш код показывает использование методов для установки и получения значений, что достаточно наглядно.

Ваша реализация с использованием методов setObj и getObj подразумевает, что вы работаете с иерархической структурой данных. Здесь вы используете setObj для установки значений по ключу. Например, вы добавили строку "blah" под ключом 'users.albums.sexPistols', а затем перезаписали это значение объектом с двумя свойствами (sid и nancy). Это демонстрирует, как можно легко управлять вложенными объектами.

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

Вы не указали подробности о реализации Storage, но если она сохраняет данные в локальном хранилище (например, LocalStorage или IndexedDB), это может быть полезным для хранения пользовательских данных в веб-приложениях.

В целом, ваш код является хорошим примером работы с объектами и их иерархической структурой в JavaScript. Если у вас есть конкретные вопросы по этому коду или нужна помощь с реализацией, не стесняйтесь спрашивать!

0

Подход с использованием JSON работает. В Internet Explorer 7 нужно подключить json2.js, и с ним всё работает идеально. Несмотря на один комментарий, утверждающий обратное, в этом браузере действительно есть поддержка localStorage. Это выглядит как лучшее решение с минимальными хлопотами. Конечно, можно написать скрипты, которые будут делать по сути то же самое, что и json2, но в этом нет особого смысла.

По крайней мере, в следующей строке версии есть поддержка localStorage, но, как уже упоминалось, нужно подключить json2.js, так как сам браузер его не включает: 4.0 (совместимый; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; BRI/2; NP06; .NET4.0C; .NET4.0E; Zune 4.7). (Я бы оставил это как комментарий к ответу, но не могу).

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь