Хранение объектов JavaScript в HTML5 localStorage и sessionStorage

Хранение объектов JavaScript в HTML5 localStorage и sessionStorage
Хранение объектов JavaScript в HTML5 localStorage и sessionStorage
Liam Lambert
четверг, 11 июля 2024 г., 21:41:43

Работа с объектами в веб-хранилище

При работе с HTML5 localStorage или sessionStorage разработчики часто сталкиваются с проблемами при попытке сохранить объекты JavaScript. В отличие от примитивных типов данных и массивов, объекты преобразуются в строки, что может привести к путанице и неожиданным результатам.

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

Команда Описание
JSON.stringify() Преобразует объект или значение JavaScript в строку JSON, позволяя хранить его в localStorage или sessionStorage.
localStorage.setItem() Сохраняет пару ключ-значение в объекте localStorage, позволяя данным сохраняться между сеансами браузера.
localStorage.getItem() Извлекает значение, связанное с данным ключом, из localStorage.
JSON.parse() Анализирует строку JSON и преобразует ее обратно в объект JavaScript, позволяя извлекать сложные структуры данных.
sessionStorage.setItem() Сохраняет пару ключ-значение в объекте sessionStorage, позволяя данным сохраняться на протяжении всего сеанса страницы.
sessionStorage.getItem() Извлекает значение, связанное с данным ключом, из sessionStorage.

Эффективное хранение и извлечение объектов в веб-хранилище

В JavaScript, localStorage и sessionStorage — это объекты веб-хранилища, которые позволяют сохранять пары «ключ-значение» в браузере. Однако эти решения для хранения поддерживают только строки, а это означает, что попытка сохранить объект JavaScript напрямую приведет к преобразованию объекта в строковое представление, например [object Object]. Чтобы эффективно хранить объекты, вам необходимо преобразовать их в строку JSON, используя JSON.stringify(). Этот метод принимает объект JavaScript и возвращает строку JSON, которую можно сохранить в localStorage или sessionStorage.

Чтобы получить сохраненный объект, вы должны преобразовать строку JSON обратно в объект JavaScript, используя JSON.parse(). Этот метод принимает строку JSON и возвращает соответствующий объект JavaScript. Сценарии, представленные в примерах выше, демонстрируют этот процесс. Сначала объект создается и преобразуется в строку JSON с помощью JSON.stringify() перед сохранением в localStorage с использованием localStorage.setItem(). Чтобы получить объект, строка JSON извлекается из localStorage с использованием localStorage.getItem() а затем анализируется обратно в объект JavaScript, используя JSON.parse().

Хранение и получение объектов JavaScript в localStorage

Использование JavaScript и JSON для localStorage

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Хранение и получение объектов JavaScript в sessionStorage

Использование JavaScript и JSON для sessionStorage

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Передовые методы веб-хранилища

При использовании HTML5 localStorage и sessionStorageразработчикам часто приходится хранить более сложные данные, чем просто строки. Хотя сериализация и десериализация JSON эффективны для базовых объектов, более сложные сценарии могут потребовать дополнительных мер. Например, если вы работаете с глубоко вложенными объектами или объектами, содержащими методы, вам нужен более сложный подход. Одним из распространенных методов является использование такой библиотеки, как Flatted или circular-json для обработки циклических ссылок и более сложных структур объектов.

Эти библиотеки расширяют стандарт JSON.stringify() и JSON.parse() методы для поддержки сериализации и десериализации объектов с циклическими ссылками, что обеспечивает более надежное решение для хранения объектов в веб-хранилище. Еще одним соображением является сжатие данных. Для больших объектов вы можете использовать такие библиотеки, как LZ-String сжимать данные перед их сохранением в localStorage или sessionStorage, уменьшая количество используемого пространства. Это может быть особенно полезно для приложений, которым необходимо хранить значительный объем данных на стороне клиента.

Общие вопросы о хранении объектов в веб-хранилище

  1. Могу ли я хранить функции в localStorage или sessionStorage?
  2. Нет, функции не могут храниться непосредственно в веб-хранилище. Вы можете сохранить код функции в виде строки и использовать eval() чтобы воссоздать его, но обычно это не рекомендуется из-за угроз безопасности.
  3. Как обрабатывать циклические ссылки в объектах?
  4. Используйте библиотеки типа Flatted или circular-json которые предназначены для обработки циклических ссылок в объектах JavaScript.
  5. Каков лимит хранения? localStorage?
  6. Лимит хранения для localStorage обычно составляет около 5 МБ, но может варьироваться в зависимости от браузера.
  7. Могу ли я сжать данные перед их сохранением?
  8. Да, вы можете использовать такие библиотеки, как LZ-String сжимать данные перед их сохранением в localStorage или sessionStorage.
  9. Как сохранить массив объектов?
  10. Преобразуйте массив в строку JSON, используя JSON.stringify() прежде чем хранить его в localStorage или sessionStorage.
  11. Безопасно ли хранить конфиденциальные данные в localStorage?
  12. Нет, хранить конфиденциальные данные в localStorage поскольку он доступен через JavaScript и может быть скомпрометирован в случае атаки на сайт.
  13. Могу ли я использовать localStorage в разных доменах?
  14. Нет, localStorage ограничен одним и тем же источником, то есть к нему нельзя получить доступ из разных доменов.
  15. Что произойдет, если пользователь очистит данные своего браузера?
  16. Все данные, хранящиеся в localStorage и sessionStorage будут удалены, если пользователь очистит данные своего браузера.

Заключительные мысли по управлению объектным хранилищем

Для эффективного хранения и извлечения объектов в веб-хранилище HTML5 необходимо преобразовать объекты в строки JSON с помощью JSON.stringify() а затем анализируем их обратно с помощью JSON.parse(). Этот метод гарантирует, что данные остаются нетронутыми и пригодными для использования в разных сеансах браузера. Понимая и используя эти методы, разработчики могут использовать localStorage и sessionStorage для более сложных задач управления данными, улучшая функциональность и производительность своих веб-приложений.