Как сохранить массив в localStorage?
Проблема с хранением объектов в localStorage
У меня есть следующий код, который работает без localStorage
:
var names = new Array();
names[0] = prompt("Какое имя нового участника?");
Этот код функционирует корректно. Однако мне необходимо сохранить переменную в localStorage
, и, похоже, я сталкиваюсь с трудностями. Я попытался сделать так:
var localStorage[names] = new Array();
localStorage.names[0] = prompt("Какое имя нового участника?");
Не совсем понимаю, где я ошибаюсь. Может ли кто-то помочь решить эту проблему?
5 ответ(ов)
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
.
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 перед сохранением и разобрано перед возвратом с помощью геттера.
Используйте JSON.stringify()
и JSON.parse()
, как предложено пользователем no! Это поможет избежать, хоть и возможно редкого, но потенциального проблемы с именем элемента, которое может содержать разделитель (например, имя элемента three|||bars
).
Похоже, вы создали интересный пример работы с объектами и их сохранением в хранилище. Ваш код показывает использование методов для установки и получения значений, что достаточно наглядно.
Ваша реализация с использованием методов setObj
и getObj
подразумевает, что вы работаете с иерархической структурой данных. Здесь вы используете setObj
для установки значений по ключу. Например, вы добавили строку "blah"
под ключом 'users.albums.sexPistols'
, а затем перезаписали это значение объектом с двумя свойствами (sid
и nancy
). Это демонстрирует, как можно легко управлять вложенными объектами.
Ваши методы getObj
позволяют извлекать данные из этой структуры, что также довольно удобно. Вы можете обращаться к любому уровню вложенности, что делает ваш подход гибким.
Вы не указали подробности о реализации Storage
, но если она сохраняет данные в локальном хранилище (например, LocalStorage или IndexedDB), это может быть полезным для хранения пользовательских данных в веб-приложениях.
В целом, ваш код является хорошим примером работы с объектами и их иерархической структурой в JavaScript. Если у вас есть конкретные вопросы по этому коду или нужна помощь с реализацией, не стесняйтесь спрашивать!
Подход с использованием 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). (Я бы оставил это как комментарий к ответу, но не могу).
Какие преимущества у Session Storage по сравнению с Local Storage?
Каков максимальный размер значений localStorage?
Как перемешать (сделать случайным) массив в JavaScript?
Как удалить все дубликаты из массива объектов?
Как проверить, содержит ли массив строку в TypeScript?