Урок, в якому розглядаються об'єкти API HTML5 sessionStorage та localStorage , призначені для збереження даних та керування ними на пристроях користувачів.
Загальні відомості про sessionStorage та localStorage
Авторам при реалізації деякого функціоналу на веб-сайті іноді доводиться зберігати дані на пристрої користувача для того, щоб потім можна було звернутися до них. Реалізувати цю можливість дозволяють об'єкти API HTML5 sessionStorage та localStorage.
Відрізняються ці об'єкти один від одного лише тим, що мають різний період зберігання даних, поміщених у них. Об'єкт sessionStorage зберігає дані обмежений час, вони видаляються відразу після того, як користувач завершує свій сеанс або закриває браузер. Об'єкт localStorage, на відміну від об'єкта sessionStorage, зберігає дані необмежений час.
Контейнери localStorage та sessionStorage зберігають дані за допомогою елементів (пар "ключ-значення"). Ключ є деяким ідентифікатором, який пов'язаний зі значенням. Тобто. для того, щоб записати або отримати деяке значення, необхідно знати його ключ. Значення є рядком, це необхідно враховувати під час роботи з ним у коді JavaScript. Якщо Вам необхідно замість рядка записати в сховище складний об'єкт, то одним із варіантів вирішення цього завдання може стати його серіалізація в JSON за допомогою JSON.stringify() .
If (window.sessionStorage && window.localStorage) ( //об'єкти sessionStorage і localtorage підтримуються ) else ( //об'єкти sessionStorage і localtorage не підтримуються )
Методи та властивість length об'єктів sessionStorage та localStorage
Перевірити, чи підтримує браузер ці API можна за допомогою наступного рядка:
GetItem(key) Метод getItem(key) використовується для отримання значення елемента сховища на його ключі (key). .setItem(key,value) Метод setItem(key,value) призначений додавання в сховище елемента із зазначеним ключем (key) і значенням (value). Якщо у сховищі вже є елемент із зазначеним ключем (key), то в цьому випадку відбудеться зміна його значення (value). .key(індекс) Метод key(індекс) повертає ключ елемента за його порядковим номером (індексом), що знаходиться в даному сховищі. .removeItem(key) Метод removeItem(key) видаляє з контейнера sessionStorage або localStorage елемент, який має вказаний ключ. .clear() Метод clear() видаляє всі елементи із контейнера. .length Властивість length повертає кількість елементів, що знаходяться у контейнері.
Робота зі сховищем localStorage
Роботу зі сховищем localStorage розглянемо на таких прикладах:
1. Додати значення, яке містить колір фону у сховищі. Доступ до даного значення будемо здійснювати за ключом bgcolor.
LocalStorage.setItem("bgColor","green");
2. Отримати колір фону зі сховища за ключом bgColor. Встановити цей колір фону на сторінці.
Var bgColor = localStorage.getItem("bgColor"); $("body").css("background-color",bgColor);
3. Дізнатися, яке ім'я має ключ, який зберігається в 1 елементі масиву localStorage:
4. Видалити з контейнера localStorage елемент, що має ключ bgcolor:
LocalStorage.removeItem("bgColor");
5. Видалити з контейнера localStorage всі елементи:
LocalStorage.clear();
6. Перебрати всі елементи, що знаходяться у контейнері localStorage.
Var data = (data1: "Значення", data2: "Значення", data3: "Значення" //...) localStorage.setItem("Ключ", JSON.stringify(data));
8. Отримати значення складного об'єкта з елемента контейнера localStorage.
Var data = (); if (localStorage.getItem("Ключ")) ( data = JSON.parse(localStorage.getItem("Ключ")); )
Робота зі сховищем sessionStorage здійснюється аналогічним способом.
Розмір сховища localStorage
У більшості браузерів розмір контейнера localStorage складає 5 Мбайт. Ця цифра є великою та достатньою для того, щоб туди зберегти дані, необхідні для роботи сайту.
Проте бувають такі ситуації, коли автори веб-сайтів можуть заповнити цей обсяг. Насамперед, це стосується таких випадків, коли розробники забувають про старі дані та додають до сховища localStorage все нові й нові порції даних. Внаслідок чого через деякий час обсяг цих даних може досягти ліміту сховища localStorage і нові порції даних вже не надходитимуть.
Щоб цього не сталося при збереженні даних, можна вказувати дату (штамп часу). А потім, наприклад, при завантаженні сторінки перевіряти ці дані застаріли чи ні. Дані, які вже застаріли видаляти. Таким чином, можна підтримувати порядок записів в localStorage .
Розглянемо цю ситуацію на прикладі інтернет-магазину в якому описаний вище механізм використовуватиметься для збереження інформації про переглянуті користувачем товари.
// товар, який переглядає користувач у магазині var viewItem = (id: "5456098", name: "Смартфон LG G4", dateView: new Date() // дата перегляду товару в інтернет-магазині); // зберігаємо, що переглядається в Наразікористувачем товар у сховищі localStorage.setItem (viewItem.id, JSON.stringify(viewItem)); // Видаляємо старі записи var key, value; // перебираємо всі дані у сховище for (var i = 0; i Програмні інтерфейси localStorage та sessionStorage обмежують доступ до даних тим доменом з урахуванням протоколу та номера порту, в якому знаходиться ця сторінка. Тобто. дані контейнерів (наприклад: http://сайт) доступні лише веб-сторінкам, які належать цьому домену. Сторінки, які не розташовані в цьому домені (http://сайт), не можуть прочитати або видалити дані цих контейнерів. Розглянемо швидкодію (у відсотковому відношенні), яке мають методи при виконанні операцій з даними в localStorage та cookie. Як браузер будемо використовувати Chrome 47, Firefox 42 і IE11, що працюють на операційній системі Windows 7. Тест 1. Швидкодія методів, що здійснюють читання даних з localStorage та cookie. Висновок: Сучасні браузери виконують операції читання даних із сховища localStorage набагато швидше, ніж із cookie. У браузері Google Chrome ця різниця досягає декількох десятків разів, у Firefox – 9 разів та в IE 11 – 2 рази. Тест 2. Швидкодія методів, що здійснюють запис даних у місцевомувиробництві та cookie. Висновок: Операції запису даних у сховищі localStorage виконуються швидше, ніж у cookie, але не настільки, як при читанні. Браузер Google Chrome виконує запис в localSorage швидше у 1.6 рази, Firefox у 7 разів, Internet Explorer 11 показав рівнозначний результат. Тест 3. Швидкодія браузерів, що здійснюють запис даних в localStorage та їх читання. Висновок: Firefox показав досить хороші переваги у швидкодії перед іншими браузерами, і це стосується не лише технології localStorage, а й cookie (діаграми не наводяться). Створення програми “список справ” (амер. to-do list), як правило, є першою програмою, яку ви робите при вивченні JavaScript, але проблема всіх цих програм полягає в тому, що коли ви перезавантажуєте сторінку всі ці списки зникають. Що таке локальне сховище? Локальне зберігання даних є частиною мережі зберігання, яке є частиною специфікації HTML5. Є два варіанти для зберігання даних у специфікації: Простими словами, все, що веб-сховище робить, це зберігає key/value пари з ім'ям локально, і на відміну від cookies, ці дані зберігаються навіть якщо ви закриєте браузер або вимкнете комп'ютер. Якщо ми думаєте про список справ, то вам знадобиться такі: Таким чином, наш HTML має виглядати приблизно так: Безпека даних localStorage та sessionStorage
Тест швидкості виконання операцій з даними в localStorage та cookie
Порівняння технологій зберігання даних cookie та Web Storage
#
Cookie (Куки, печиво)
localStorage та sessionStorage
Де зберігаються?
На комп'ютері користувача
На комп'ютері користувача
Доступність даних
Дані доступні як з боку сервера, так і клієнта
Дані доступні лише з боку браузера через JavaScript API
Максимальний розмір даних
4 Кбайт
5 або 10 Мбайт залежно від браузера
Зручність методів роботи з даними
Незручні методи роботи з cookie на стороні клієнта (браузера)
Прості та зручні методи для роботи з даними
Час зберігання даних
обмежений час (наприкінці сеансу або після закінчення зазначеної дати)
необмежений час (localStorage) або після завершення сеансу (sessionStorage)
Чи надсилається інформація на веб-сервер?
Інформація завжди передається веб-серверу у складі HTTP-заголовка
Інформація ніколи не передається на сервер
Браузери, що підтримують цю технологію
Усе
Google Chrome 4+, Internet Explorer 8+, Mozilla Firefox 3.5+, Safari 4+, Opera 11.5+
Інше
ЄС вимагає інформувати користувачів, якщо на сайті використовуються cookies
Безпека даних забезпечується технологією HTML5 Origin
Існує просте рішення – використання локального сховища. Перевагою локального сховища є те, що ви можете зберегти біт даних на комп'ютері користувача, і коли відбулося перезавантаження сторінки, всі списки завдань залишилися на місці.
Це досить стандартний HTML контейнер і з нашими JavaScript ми можемо заповнити все це з динамічним контентом.
Оскільки ми будемо використовувати JQuery в цьому прикладі, ви повинні також включити його в HTML документ.
JavaScript
Якщо ми подумаємо про структуру простого "to-do list" програми, то перше, що нам потрібно зробити, це перевірити, чи має введення порожнє значення, коли користувач натискає на кнопку "додати" або "перевірити":
$("#add").click(function() ( var Description = $("#description").val(); //if the to-do is empty if($("#description").val() ) == "") ( $("#alert").html(" Warning! You left the to-do empty"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )
Все, що ми зробили, це перевірили клік на кнопку Додати і запустили простий тест, щоб перевірити, якщо користувач заповнив введення чимось. Якщо ні, тоді попередження div спливає і залишається на 1000 мс, а потім зникає.
Наступне, що нам потрібно зробити, це вставити елемент списку зі значенням в рядку введення, і ми попередимо це так, що коли користувач додає завдання, вона завжди буде йти в початок списку, а потім зберігати елемент списку в локальне сховище, ось так:
// add the list item $("#todos").prepend("
Як ви бачите, це досить стандартний jQuery і коли справа доходить до локального сховища, ми повинні зберегти ключ і значення. Ключ являє собою ім'я, яке ми собі задаємо, у цьому випадку ми просто назвемо його "Todos", потім ми повинні визначити, що ми хочемо зберегти, і в даному випадку це весь HTML, що знаходиться всередині Todos неупорядкованого списку. Як ви бачите, ми всі захопили за допомогою jQuery, і, нарешті, повернули помилкові (false) так, щоб форма не здавалася і наша сторінка не оновлювалася.
Наш наступний крок – це перевірити, чи є у нас щось збережене на локальному сховищі. Якщо є, тоді нам потрібно розмістити це на сторінці, враховуючи те, що ми дали нашому ключу ім'я “todos”, нам потрібно перевірити його існування. Ось так:
// if we have something on local storage place that if(localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )
Якщо ви протестуєте нашу програму і перезавантажте сторінку, побачите, що вона вже працює. Все, що нам залишається зробити, це створити функцію, яка буде відповідати за очищення всього списку. Ми перемо всі місцеві зберігання, перезавантажуємо сторінку, щоб наша зміна набула чинності, а потім повертаємо “false”, щоб запобігти хеш перед URL наступним чином:
// clear all the local storage $("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));
Повний код виглядає так:
$("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Warning! You left the to-do empty"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("
Підтримка браузерів
Підтримка Web Storage досить хороша для HTML5 специфікацій, вона підтримується всіма основними браузерами і навіть IE8.
Дуже часто першим додатком на JavaScript буває Todo-список, але проблема подібних програм у тому, що після оновлення сторінки всі пункти списку зникають.
Просте вирішення цієї проблеми – використання локально сховища(Local Storage). Локальне сховище дозволяє зберігати дані на машині користувача і легко завантажити список з нього після оновлення сторінки. У цій статті ми напишемо невеликий todo-list із використанням локального сховища.
Що таке локальне сховище?
Локальне сховище («веб-сховище») спочатку було частиною специфікації HTML5, але зараз винесено на окрему. Зберігати дані можна двома способами:
- Local Storage: постійне сховище, саме його ми використовуватимемо.
- Session Storage: зберігає дані тільки цієї сесії, якщо користувач закриє сторінку, дані будуть втрачені.
Локальне сховище дозволяє зберігати на комп'ютері користувача дані у вигляді пар ключ-значення і ці дані будуть доступні навіть після закриття браузера або вимкнення комп'ютера.
HTML
Для створення todo-списку нам знадобиться:
- Текстовий вхід для введення вмісту елемента.
- Кнопка додавання елемента до списку.
- Кнопка очищення списку.
- Сам список (
- ).
- І додатковий div для показу помилок.
Таким чином, HTML розмітка буде виглядати так:
Досить проста структура, яку ми оживимо за допомогою JavaScript.
Т.к. ми використовуємо jQuery, необхідно додатково підключити її.
JavaScript
Для початку нам необхідно відслідковувати натискання на кнопку додавання і перевіряти, щоб поле для введення не було порожнім:
$("#add").click(function() ( var Description = $("#description").val(); if($("#description").val() == "") ( $( "#alert").html(" Warning! You left the to-do empty"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; )
Цей код перевіряє значення текстового input'а і, якщо воно порожнє - показує помилку і повертає false, щоб частина коду, що залишилася, не виконалася і елемент не додався до списку.
// Вставляємо запис $("#todos").prepend("
Для роботи з локальним сховищем необхідно надати ключ та відповідне значення. У нашому випадку назвемо ключ 'todos', а значенням буде весь HTML-код, який міститься в списку (у тезі
- ). Цей код легко отримати за допомогою jQuery. І, нарешті, ми повертаємо false, щоб запобігти сабміт форми і не перезавантажувати сторінку.
- " + Description + " "); $("#form").reset(); var todos = $("#todos").html(); localStorage.setItem("todos", todos); return false; )); .getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); ) $("#clear").click(function() ( window.localStorage.clear( );location.reload();return false; ));
- Локальне сховище
- Сесійне сховище
- IndexedDB
- WebSQL (застаріле)
- Їх можна використовувати для спілкування з сервером
- Ми можемо визначити для cookie термін їх автоматичного закінчення замість того, щоб видаляти вручну.
- Вони додаються до завантаження сторінки документа
- Вони можуть зберігати невелику кількість даних
- Вони можуть містити лише рядки.
- Потенційні проблеми із безпекою.
- Цей метод не рекомендується для зберігання даних на клієнті з моменту появи Web Storage API (локальне та сесійне сховище).
- Пропонує більш простий та інтуїтивний інтерфейс зберігання даних.
- Більше безпечно для зберігання даних на клієнті.
- Дозволяє зберігати більше даних (всі 3 пункти - у порівнянні з кукі).
- Дозволяє зберігати лише рядки
Наступний крок - перевірити локальне сховище, якщо існує значення з ключем 'todos', завантажити список з локального сховища:
If (localStorage.getItem("todos")) ( $("#todos").html(localStorage.getItem("todos")); )
Т.к. ми зберігаємо готовий HTML у сховищі, ми просто вставляємо цей код у список.
Наш todo-list майже готовий, залишилося лише реалізувати функцію очищення списку. Коли користувач натисне кнопку буде видалено весь список і локальне сховище буде очищено:
$("#clear").click(function() ( window.localStorage.clear(); location.reload(); return false; ));
Готово! Повний код виглядає так:
$(document).ready(function() ( $("#add").click(function() ( var Description = $("#description").val(); if ($("#description"))). val() == "") ( $("#alert").html(" Warning! You left the to-do empty"); $("#alert").fadeIn().delay(1000).fadeOut(); return false; ) $("#todos").prepend("
Підтримка браузерами
Веб сховище підтримують всі основні браузери, навіть IE8. Побоюватися варто лише IE7 та нижче.
Висновок
Локальне сховище в таких невеликих програмах може стати відмінною заміною базі даних. Зберігання невеликих обсягів інформації має викликати труднощів.
Огляд Web Storage
В Інтернеті інформацію можна зберігати у двох місцях: на веб-сервері та на веб-клієнті (тобто комп'ютері відвідувача сторінки). Певні типи даних краще зберігати в одному з цих місць, інші типи - в іншому.
Правильним місцем для зберігання конфіденційних та важливих даних буде веб-сервер. Наприклад, якщо ви покладете будь-які товари у свій кошик в онлайновому магазині, дані про вашу потенційну покупку зберігаються на веб-сервері. На вашому комп'ютері зберігається лише кілька байтів даних для відстеження, що містять інформацію про вас (або, вірніше, про ваш комп'ютер), щоб веб-сервер знав, який із кошиків ваш. Навіть із новими можливостями HTML5 змінювати цю систему немає потреби - вона надійна, безпечна та ефективна.
Але зберігання даних на сервері який завжди є найкращим підходом, т.к. іноді легше зберігати другорядну інформацію на комп'ютері користувача. Наприклад, має сенс зберігати локально налаштування користувача (скажімо, параметри, які визначають спосіб відображення веб-сторінки) і стан програми (знімок поточного стану веб-додатка), щоб відвідувач міг продовжити його виконання з того ж самого місця пізніше.
До HTML5 єдиним способом локального зберігання даних було використання механізму файлів cookies, який спочатку був розроблений для обміну невеликими обсягами ідентифікуючої інформації між веб-серверами та браузерами. Файли cookie підходять ідеально для зберігання невеликих обсягів даних, але модель JavaScript для роботи з ними трохи незграбна. Система файлів cookies також змушує розробника возитися з термінами дії і даремно пересилати дані туди і назад через інтернет з кожним запитом сторінки.
У HTML5 вводиться найкраща альтернатива файлам cookies, яка дозволяє легко та просто зберігати інформацію на комп'ютері відвідувача. Ця інформація може зберігатися на клієнтському комп'ютері необмежений час, не відправляється на веб-сервер (якщо тільки розробник не зробить це сам), може бути великого обсягу і для роботи з нею потрібна лише пара простих, ефективних об'єктів JavaScript.
Ця можливість називається веб-сховищем (Web Storage)і добре підходить для застосування з автономним режимом роботи вебсайтів, т.к. дозволяє створювати самодостатні автономні програми, які можуть зберігати всю необхідну їм інформацію навіть за відсутності підключення до інтернету.
Функціональність веб-сховища HTML5 дозволяє веб-сторінці зберігати дані на комп'ютері відвідувача. Ця інформація може бути короткочасною, яка видаляється після вимкнення браузера, або довготривалою, яка залишається доступною під час наступних відвідувань веб-сторінки.
Інформація, що зберігається в веб-сховищі, насправді зберігається не в інтернеті, а на комп'ютері відвідувача веб-сторінки. Іншими словами, веб-сховище означає зберігання даних не в інтернеті, а зберігання даних з інтернету.
Існують два типи веб-сховищ, які так чи інакше пов'язані з двома об'єктами:
Локальне сховищеВикористовує об'єкт localStorageзберігати дані для всього веб-сайту на постійній основі. Це означає, що якщо веб-сторінка збереже дані в локальному сховищі, ці дані будуть доступні для користувача, коли він повернеться на цю веб-сторінку наступного дня, наступного тижня або наступного року.
Звичайно, більшість браузерів також надає користувачеві можливість очистити локальне сховище. У деяких браузерах вона реалізована як стратегія "все або нічого", і за допомогою її видаляються всі локальні дані, багато в чому подібно до того, як видаляються cookies-файли. (Насправді, в деяких браузерах система cookies та локальне сховище взаємопов'язані, так що єдиним способом видалити локальні дані буде видалення cookies.) А інші браузери можуть надавати користувачеві можливість перегляду даних для кожного окремого веб-сайту та видаляти дані вибраного сайту або сайтів.
Сховище даних сеансівВикористовує об'єкт sessionStorageтимчасового зберігання даних для одного вікна або вкладки браузера. Ці дані доступні лише доти, доки користувач не закриє вікно або вкладку, після чого сеанс закінчується та дані видаляються. Але дані сеансу зберігаються, якщо користувач переходить на інший веб-сайт, а потім повертається назад за умови, що це відбувається у тому ж вікні браузера.
З точки зору коду веб-сторінки як локальне сховище, так і сховище даних сеансів працюють абсолютно однаково. Різниця полягає лише у тривалості зберігання даних.
Використання локального сховища надає найкращу можливість для збереження необхідної інформації для подальших відвідувань веб-сторінки користувачем. А сховище сеансів служить зберігання даних, які потрібно передавати від однієї сторінки інший. (У сховищі сеансів можна зберігати тимчасові дані, що використовуються тільки на одній сторінці, але для цієї мети чудово працюють звичайні змінні JavaScript.)
Як локальне сховище, так і сховище сеансів пов'язані з доменом веб-сайту. Таким чином, якщо зберегти в локальному сховищі дані для сторінки www..html ці дані будуть доступні для сторінки www..html, т.к. обидві ці сторінки мають один і той самий домен. Але ці дані не будуть доступні для сторінок інших доменів.
З іншого боку, т.к. веб-сховище розташоване на комп'ютері (або мобільному пристрої) даного користувача, воно пов'язане з цим комп'ютером, і веб-сторінка, відкрита на даному комп'ютері і зберігає дані в його локальному сховищі, не має доступу до інформації, яку вона зберегла на іншому комп'ютері. Подібним чином веб-сторінка створює окреме локальне сховище, якщо ви увійдете в систему під іншим ім'ям користувача або запустіть інший браузер.
Хоча специфікація HTML5 не встановлює жодних жорстких правил щодо максимального обсягу сховища, більшість браузерів обмежують його 5 Мбайт. У цей обсяг можна запакувати багато даних, але його буде недостатньо, якщо ви хочете використовувати локальне сховище для оптимізації продуктивності та кешувати в ньому зображення або відео великого об'єму (і, правду кажучи, локальне сховище не призначене для таких цілей).
Для зберігання великого обсягу даних стандарт бази даних, що все ще розвивається. IndexedDBдопускає локальне зберігання набагато більшого обсягу - зазвичай 50 Мбайт для початку та більше, за згодою користувача.
Збереження даних
Перш ніж помістити фрагмент інформації в локальне сховище або сховища сеансів, йому необхідно надати описове ім'я. Це ім'я називається ключем (key) і потрібне для того, щоб дані можна було отримати в майбутньому.
Синтаксис для збереження фрагмента даних:
localStorage = data;
// JS localStorage["username"] = "Ivan Petrov";
Звісно ж, зберігати фрагмент статичного тексту немає сенсу. Як правило, нам потрібно зберігати будь-які змінні дані, наприклад поточну дату, результат математичного обчислення або текстові дані, введені користувачем у поля форми. Далі наведено приклад збереження введених користувачем текстових даних:
Function saveData() ( // Отримуємо значення текстових полів var localData = document.getElementById("localData").value; var sessionData = document.getElementById("sessionData").value; // Зберігаємо текст, введений у текстовому полі, в локальному сховищі localStorage["localData"] = localData; // Зберігаємо текст, введений у текстовому полі, у сховищі сесій sessionStorage["sessionData"] = sessionData; ) function loadData() ( // Завантажуємо збережені дані зі сховищ var localData = localStorage ["localData"]; var sessionData = sessionStorage["sessionData"]; // Відображаємо ці дані в текстових полях if (localData != null) ( document.getElementById("localData").value = localData; ) if (sessionData ! = null) ( document.getElementById("sessionData").value = sessionData; ) )
Сторінка містить два текстові поля: для локального сховища (зверху) та для сховища сеансів (знизу). Натискання кнопки "Зберегти" зберігає текст, введений у текстові поля, а натискання кнопки "Завантажити" виводить у полях відповідні збережені дані.
Веб-сховище також підтримує менш поширений синтаксис властивостей. Відповідно до правил цього синтаксису, ми звертаємося до осередку зберігання з ім'ям username як localStorage.username, а не localStorage["username"]. Обидва типи синтаксису рівнозначні, та використання того чи іншого є питанням особистої переваги.
Веб-сховище не працює без веб-сервера
У своїх дослідженнях веб-сховища ви можете мати справу з несподіваною проблемою. У багатьох браузерах веб-сховище працює лише для сторінок, наданих веб-сервером. При цьому не важливо, де розташований сервер, в інтернеті або на власному комп'ютері, найголовніше, просто щоб сторінки не запускалися з локального жорсткого диска (наприклад, подвійним клацанням по значку файлу сторінки).
Ця особливість є побічним ефектом способу, яким браузери виділяють місце у локальне сховище. Як раніше говорилося, браузери обмежують локальне сховище для кожного веб-сайту 5 Мбайт, для чого їм необхідно порівнювати кожну сторінку, яка бажає використовувати локальне сховище, з доменом сайту.
Що ж відбувається, якщо відкрити сторінку, яка використовує веб-сховище з локального жорсткого диска? Все залежить від браузера. Браузер Internet Explorer, схоже, повністю втрачає підтримку веб-сховища. Об'єкти localStorage та sessionStorage зникають, і спроба використовувати їх викликає помилку JavaScript.
У браузері Firefox об'єкти localStorage і sessionStorage залишаються на місці і начебто підтримуються (навіть Modernizr визначає, що підтримуються), але все, що відправляється на зберігання, зникає невідомо куди. У браузері Chrome знову ж таки щось інше - більша частина функціональності веб-сховища працює як слід, але деякі можливості (наприклад, подія onStorage) не працюють.
Подібні проблеми виникають і за допомогою інтерфейсу File API. Тому ви позбавите себе багатьох клопотів, якщо помістите сторінку, що тестується на тестовий сервер, щоб уникнути всіх цих невизначеностей.
Підтримка веб-сховища браузерами
Веб-сховище є однією з найбільш підтримуваних можливістю HTML5, з хорошим рівнем підтримки в кожному основному браузері. У таблиці нижче наведено мінімальні версії основних браузерів, що підтримують веб-сховище:
Всі ці браузери надають можливість локального сховища та сховища даних сеансу. Але для підтримки події onStorage потрібні пізніші версії браузерів, наприклад, IE 9, Firefox 4 або Chrome 6.
Найпроблемнішою є версія IE 7, яка не підтримує веб-сховище взагалі. Як обхідне рішення можна емулювати веб-сховище за допомогою файлів cookies. Це не зовсім ідеальне рішення, але воно працює. Хоча офіційного сценарію для закриття цього пропуску не існує, кілька хороших відправних точок можна знайти на сторінці HTML5 Cross Browser (у розділі "Web Storage").
Зберігання даних безпосередньо в браузері має безліч переваг, основна з яких це швидкий і незалежний від мережі доступ до бази даних. На даний момент є 4 активні методи для цього (плюс один застарілий):
Кукі
Кукі це класичний спосіб зберігання простих малих даних усередині документа. Зазвичай кукі надсилаються з сервера на клієнт, який може зберігати їх, а потім відправляти назад на сервер у відповідь на наступні запити. Це може бути використане для таких речей, як керування сесіями облікового запису або відстеження інформації користувача.
Додатково кукі можна використовувати для простого зберігання даних на клієнтській стороні. Тому вони також часто використовуються для зберігання загальних даних типу налаштувань користувача.
Базові CRUD-операції з кукі
// Create document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;secure"; // Read (All) console.log(document.cookie); // Update document.cookie = "user_age=24;max-age=31536000;secure"; // Delete document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";
Переваги кукі
Недоліки кукі
Підтримка у браузерах
Cookie має базову підтримку у всіх великих браузерах.
Локальне сховище
Локальне сховище це один з різновидів Web Storage API, спеціального API для зберігання даних у браузері у форматі ключ-значення. Цей API був створений як рішення для проблем з cookie і є більш інтуїтивним та безпечним способом зберігання простих даних усередині браузера.
Хоча технічно ми можемо зберігати у локальному сховищі лише рядки, це обходиться за рахунок перетворення на JSON. Таким чином ми можемо зберігати в локальному сховищі складніші дані в порівнянні з куки.
Базові CRUD-операції з локальним сховищем
// Create const user = (name: "Ire Aderinokun", age: 25) localStorage.setItem("user", JSON.stringify(user)); // Read (Single) console.log(JSON.parse(localStorage.getItem("user"))) // Update const updatedUser = ( name: "Ire Aderinokun", age: 24 ) localStorage.setItem("user", JSON.stringify(updatedUser)); // Delete localStorage.removeItem("user");
Переваги локального сховища
Недоліки локального сховища
Підтримка у браузерах
Сесійне сховище
Сесійне сховище це другий різновид Web Storage API. Воно таке саме як і локальне сховище за винятком того, що дані зберігаються тільки для сесії вкладки браузера. Як тільки користувач виходить зі сторінки і закриває браузер, дані очищаються.
Базові CRUD-операції із сесійним сховищем
// Create const user = (name: "Ire Aderinokun", age: 25) sessionStorage.setItem("user", JSON.stringify(user)); // Read (Single) console.log(JSON.parse(sessionStorage.getItem("user"))) // Update const updatedUser = ( name: "Ire Aderinokun", age: 24 ) sessionStorage.setItem("user", JSON.stringify(updatedUser)); // Delete sessionStorage.removeItem("user");
Переваги, недоліки та підтримка в браузерах такі ж, як і у локального сховища.
IndexedDB
IndexedDB це набагато складніше і опрацьоване рішення для зберігання даних у браузері, оскільки це низькорівневий API для зберігання на клієнті значної кількості структурованих даних. За своєю суттю це об'єктно-орієнтована база даних, що базується на JavaScript, яка дозволяє нам легко зберігати та вилучати дані, проіндексовані за ключом.
WebSQL
WebSQL це API для реляційної бази на клієнті, подібне до SQLite. З 2010 року робоча група W3C припинила роботу над цією специфікацією і цей API більше не є частиною специфікації HTML і не повинен використовуватися.
