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

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

Працюючи з 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, і це об’єкти веб-сховища, які дозволяють зберігати пари ключ-значення у браузері. Однак ці рішення для зберігання підтримують лише рядки, а це означає, що спроба безпосередньо зберегти об’єкт JavaScript призведе до перетворення об’єкта на рядкове представлення, наприклад . Щоб ефективно зберігати об’єкти, вам потрібно перетворити їх на рядок JSON за допомогою JSON.stringify(). Цей метод приймає об’єкт JavaScript і повертає рядок JSON, який можна зберегти або .

Щоб отримати збережений об’єкт, потрібно перетворити рядок JSON назад на об’єкт JavaScript за допомогою . Цей метод приймає рядок JSON і повертає відповідний об’єкт JavaScript. Сценарії, наведені в прикладах вище, демонструють цей процес. Спочатку створюється об’єкт і перетворюється на рядок JSON за допомогою перед зберіганням у використовуючи localStorage.setItem(). Для отримання об’єкта витягується рядок JSON використовуючи а потім аналізується назад в об’єкт JavaScript за допомогою .

// 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 }

// 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 і , розробникам часто потрібно зберігати складніші дані, ніж просто рядки. Хоча серіалізація та десеріалізація JSON ефективні для базових об’єктів, більш складні сценарії можуть потребувати додаткових міркувань. Наприклад, якщо ви працюєте з глибоко вкладеними об’єктами або об’єктами, що містять методи, вам потрібен більш складний підхід. Одним із поширених прийомів є використання бібліотеки, наприклад або circular-json для обробки циклічних посилань і складніших структур об’єктів.

Ці бібліотеки розширюють стандарт і методи для підтримки серіалізації та десеріалізації об’єктів із циклічними посиланнями, що забезпечує більш надійне рішення для зберігання об’єктів у веб-сховищі. Ще один аспект — стиснення даних. Для великих об’єктів можна використовувати такі бібліотеки, як щоб стиснути дані перед їх збереженням localStorage або , зменшуючи обсяг використовуваного простору. Це може бути особливо корисним для програм, яким потрібно зберігати значну кількість даних на стороні клієнта.

1. Чи можу я зберігати функції в або ?
2. Ні, функції не можна зберігати безпосередньо у веб-сховищі. Ви можете зберегти код функції як рядок і використовувати щоб відтворити його, але це зазвичай не рекомендується через ризики для безпеки.
3. Як обробляти циклічні посилання в об’єктах?
4. Використовуйте такі бібліотеки, як або які призначені для обробки циклічних посилань в об’єктах JavaScript.
5. Для чого призначений ліміт зберігання ?
6. Ліміт зберігання для зазвичай становить близько 5 Мб, але він може відрізнятися в різних браузерах.
7. Чи можу я стиснути дані перед збереженням?
8. Так, ви можете використовувати такі бібліотеки, як щоб стиснути ваші дані перед їх збереженням або .
9. Як зберегти масив об’єктів?
10. Перетворіть масив на рядок JSON за допомогою перед зберіганням або .
11. Чи безпечно зберігати конфіденційні дані ?
12. Ні, зберігати конфіденційні дані небезпечно оскільки він доступний через JavaScript і може бути скомпрометований у разі атаки на сайт.
13. Чи можу я використовувати в різних доменах?
14. Немає, обмежено одним джерелом, тобто до нього неможливо отримати доступ у різних доменах.
15. Що станеться, якщо користувач очистить дані браузера?
16. Усі дані, що зберігаються в і буде видалено, якщо користувач очистить дані свого браузера.

Ефективне зберігання та отримання об’єктів у веб-сховищі HTML5 вимагає перетворення об’єктів на рядки JSON за допомогою а потім розібрати їх назад за допомогою . Цей метод гарантує, що дані залишаться недоторканими та придатними для використання в різних сесіях браузера. Розуміючи та використовуючи ці методи, розробники можуть використовувати localStorage і sessionStorage для більш складних завдань керування даними, підвищуючи функціональність і продуктивність своїх веб-додатків.