Зберігання об’єктів JavaScript у HTML5 localStorage та sessionStorage

Зберігання об’єктів JavaScript у HTML5 localStorage та sessionStorage
Зберігання об’єктів JavaScript у HTML5 localStorage та sessionStorage
Liam Lambert
четвер, 11 липня 2024 р. о 22:00:38

Робота з об’єктами у веб-сховищі

Працюючи з 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 для більш складних завдань керування даними, підвищуючи функціональність і продуктивність своїх веб-додатків.