Короткий посібник з web storage, html

Майже всім настільним і мобільним додаткам потрібно десь зберігати дані. Але як бути веб-сайтів? У минулому, ми використовували для цієї мети файли cookie. але у них є серйозні обмеження.

HTML5 надає більш підходящі інструменти для вирішення цієї проблеми. Перший інструмент - це IndexedDB. який є зайвим, кажучи про заміну cookie, а другий - Web Storage. є комбінацією двох дуже простих інтерфейсів API. Про нього я і збираюся розповісти вам сьогодні.

Що таке Web Storage?

Взагалі, Web Storage (відоме також як DOM-сховище) відноситься до безлічі API, які націлені на забезпечення простого способу зберігання даних з боку клієнта в браузері. Ця технологія більш безпечна і швидка, ніж cookie, нема про кажучи вже про її потужності.

Дані зберігаються в призначеному для користувача браузері і не передаються по мережі як файли cookie. Крім того, можна зберігати більшу кількість інформації, ніж при використанні файлів cookie, без шкоди продуктивності вашого веб-сайту.

Web Storage надає два відмінних об'єкта для зберігання даних:

localStorage. Використовуючи цей об'єкт, ви будете зберігати дані без дати закінчення терміну. Це означає, що дані будуть збережені на локальному диску користувача назавжди.

sessionStorage. Використовуючи цей об'єкт, дані, які ви зберегли, будуть перебувати у сховищі до тих пір, поки відвідувач не закриє браузер (але не вкладку). Хороший варіант використання для даного об'єкта це збереження тимчасових даних, таких як вміст форм, заповнених користувачем, в разі, якщо користувач випадково закрив вкладку або оновив сторінку.

Отже, зараз коли ми дізналися, що ж таке Web Storage, прийшов час глибше зануритися в нього.

localStorage

Зберігати дані в localStorage дуже просто - вам потрібно тільки оголосити їх як властивість. Читання даних також просто, як в прикладі, наведеному нижче:

sessionStorage

Зберігання та вилучення даних з sessionStorage виконується таким же способом:

Обидва об'єкти мають методи setItem (), getItem () і removeItem (). які ви також можете використовувати:

Також можна виконувати по ним перебір, як по звичайних об'єктів, і перевіряти їх довжину:

Це тільки основи для використання Web Storage, але цього буде достатньо для реалізації API в ваших веб-додатках.

Існують і більш круті речі, які ви можете робити з Web Storage, як ви зможете побачити прямо зараз.

підтримка браузера

Як завжди у випадку з приголомшливими функціями HTML5, ви повинні перевірити список підтримуваних браузерів, перш ніж скористатися цими функціями. Web Storage підтримується багатьма сучасними браузерами, включаючи IE8 +, тому воно готове до використання.

На жаль, IE7 і більш ранні версії Internet Explorer не підтримують API, тому вам потрібно буде використовувати один з наведених нижче відкатів, якщо ви хочете підтримувати ці версії.

Простий (експериментальна перевірка концепції) завантажувач скриптів, який кешируєт скрипти за допомогою localStorage.

Короткий посібник з web storage, html

LocalDB.js

Інструмент, який відображає структуру баз даних в об'єкти за допомогою localStorage API.

Короткий посібник з web storage, html

Rockstage.js

Короткий посібник з web storage, html

store.js надає простий API для крос-браузерного локального сховища.

висновок

Web Storage - це відмінна функція HTML5, і хоча минуло час з її введення, зараз у нас є безліч чудових бібліотек для неї.

Переклад статті «A Quick Guide to Web Storage» був підготовлений дружною командою проекту Сайтобудування від А до Я.