Web Storage

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до: навігація, пошук
HTML

Web Storage, Веб сховище або DOM сховище  — це програмні методи і протоколи веб-додатків, що використовуються для зберігання даних у веб-браузері. Веб-сховище являє собою постійне сховище даних, схоже на куки, але зі значно розширеною ємністю і без пересилання інформації в заголовку запиту HTTP.[1] Існують два основних типи веб-сховища: локальне сховище (localStorage) і сесійне сховище (sessionStorage), що поводяться аналогічно постійним (Persistent cookie) і сесійним (Session cookie) кукам відповідно.

Веб-сховище стандартизоване згідно WWW Консорціумом (W3C). Спочатку стандарти були частиною специфікації HTML5, але зараз є окремою специфікацією.[2] Веб-сховище підтримується Internet Explorer 8 і вище, Mozilla-браузерами (наприклад, Firefox 2+, офіційно від 3.5),[3] Safari 4 і вище, Google Chrome 4 (підтримка sessionStorage додана від 5) і Opera починаючи з версії 10.50.[4]

Особливості[ред.ред. код]

Веб-сховище спрощено можна уявляти як удосконаленні куки. Проте з куками воно має і деякі ключові відмінності.

Розмір сховища[ред.ред. код]

Веб-сховище підтримує набагато більше місця на диску в порівнянні з куками, яким доступно всього 4 Кб, що приблизно в 1000 разів менше ніж у веб-сховища: 5 Мбайт на джерело походження в Mozilla Firefox , Google Chrome, і Opera, і в Internet Explorer 10 Мбайт.[5]

Інтерфейс на стороні клієнта[ред.ред. код]

На відміну від cookies, які можуть бути доступні як на сервері, так і на стороні клієнта, веб-сховище потрапляє виключно до компетенції сценаріїв (скриптів) на боці клієнта.

Дані інтернет-сховища не передаються на сервер при кожному запиті HTTP, і веб-сервер не може безпосередньо записати в Веб-сховище. Однак, і одне, і друге можна явно зробити за допомогою клієнтських скриптів, що уможливлює «тонке настроювання» бажаних комунікацій з сервером.

Локальне та сесійне сховища[ред.ред. код]

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

Дія сесійного сховища обмежується життям даного вікна, тобто для кожного відкритого вікна створюється нова сесія, яка припиняє своє існування при закритті вікна. Збереження сесії призначене для надання окремих екземплярів одного і того ж веб-додатку для роботи в різних вікнах, не заважаючи один одному. У випадку з куками подібне зробити вкрай важко або навіть неможливо.[6]

Інтерфейс і модель даних[ред.ред. код]

Веб-сховище тепер надає кращий програмний інтерфейс ніж куки, бо має інтерфейс словнику, де ключі і значення є рядками. Додатковий API для доступу до структурованих даних на основі SQL є рекомендованим стандартом W3C.[7]

Використання[ред.ред. код]

Браузери, що підтримують веб-сховище, мають глобальні змінні sessionStorage та localStorage об'явлені на рівні вікна. Наступний код на JavaScript може використовуватись для демонстрації поведінки веб-сховища:

sessionStorage[ред.ред. код]

// Зберігає значення в браузері, на тривалість сесії
sessionStorage.setItem('key', 'value');

// Повертає значення (видаляється, якщо браузер закрито)
alert(sessionStorage.getItem('key'));

localStorage[ред.ред. код]

// Зберігає значення в браузері, поза тривалістю сесії
localStorage.setItem('key', 'value');

// Повертає значення (залишається навіть якщо браузер перевідкрито)
alert(localStorage.getItem('key'));

Доступ до даних на активному домені[ред.ред. код]

Наступний код дістає всі значення із локального сховища для активного домену (домен сторінки, на якій знаходиться користувач). Цей код JavaScript можна виконати за допомогою інструментів розробника, що доступні у всіх сучасних браузерах:

var output = "LOCALSTORAGE DATA:\n------------------------------------\n";
if (localStorage) {
    if (localStorage.length) {
       for (var i = 0; i < localStorage.length; i++) {
           output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '\n';
       }
    } else {
       output += 'There is no data stored for this domain.';
    }
} else {
    output += 'Your browser does not support local storage.'
}
console.log(output);

Типи даних[ред.ред. код]

За допомогою API сховища можна зберігати лише рядки.[8] При спробі зберегти дані іншого типу вони автоматично конвертуються в рядок у більшості браузерів. Хоча попереднє перетворення у JSON (JavaScript Object Notation) уможливлює сберігання будь-яких об'єктів JavaScript.

// Збереження об’єкту замість рядка
localStorage.setItem('key', {name: 'value'});
alert(typeof localStorage.getItem('key')); // string

// Збереження цілого числа замість рядка
localStorage.setItem('key', 1);
alert(typeof localStorage.getItem('key')); // string

// Збереження об’єкту в JSON
localStorage.setItem('key', JSON.stringify({name: 'value'}));
alert(JSON.parse(localStorage.getItem('key')).name); // value

Номенклатура[ред.ред. код]

Чернетка W3C названа «Web Storage», але назви «DOM storage» чи «Інтернет-сховище» теж широко розповсюджені.[9][10]

«DOM» у DOM-сховищі буквально не відповідає Document Object Model. Згідно W3C, «Назва DOM посилається на набір API доступний для скриптів у веб-додатках, і не обов'язково означає наявність самого „об'єкту документа“…»[11]

Керування веб-сховищем[ред.ред. код]

Зберігання об'єктів веб-сховища за замовчанням увімкнене у Mozilla Firefox і SeaMonkey, але може бути вимкнене за допомогою «about: config» параметра «dom.storage.enabled» у значення «false».[12]

Mozilla Firefox зберігає усі об'єкти у сховищі в єдинму файлі під назвою webappsstore.sqlite. Команда sqlite3 можна використовувати, щоб показати всі збережені там елементи.[13]

Існують розширення/додатки для Chrome та Mozilla Firefox, що дозволяють користувачам керувати веб-сховищем, наприклад «Click&Clean»[14][15] або «BetterPrivacy», котрі можуть регулярно очищати локальне сховище в автоматичному режимі.[16][17][18]

Див. також[ред.ред. код]

Посилання[ред.ред. код]

  1. AndyHume.net, 2011 http://blog.andyhume.net/localstorage-is-not-cookies
  2. Web Storage. W3.org
  3. Mozilla Developer Center: DOM Storage. Developer.mozilla.org. Retrieved on 2011-06-12.
  4. [1]. HTML5 Web Storage in Essence (2011-02-28). Retrieved on 2012-03-30.
  5. Introduction to Web Storage. Microsoft Developer Network, msdn.microsoft.com. Retrieved on 2014-08-05.
  6. W3C: Web Storage draft standard. Dev.w3.org (2004-02-05). Retrieved on 2011-06-12.
  7. W3C: Indexed Database API. W3C. Станом на 08.01.2015
  8. W3C, 2011 http://dev.w3.org/html5/webstorage/
  9. Mozilla Developer Center: DOM Storage. Developer.mozilla.org. Retrieved on 2011-06-12.
  10. MSDN: Introduction to DOM Storage. Msdn.microsoft.com. Retrieved on 2011-06-12.
  11. W3C: Web Storage draft standard. Dev.w3.org (2004-02-05). Retrieved on 2011-06-12.
  12. Mozillazine article on disabling Web Storage Objects in about:config. Kb.mozillazine.org. Retrieved on 2011-06-12.
  13. Firefox's Super Cookies, Cerias, January 16, 2008
  14. «Click&Clean» extension for Google Chrome. Hotcleaner.com (2011-06-01). Retrieved on 2011-06-12.
  15. "Click&Clean add-on for Mozilla Firefox. Addons.mozilla.org. Retrieved on 2011-06-12.
  16. Mozilla add-ons page for «Better Privacy». Addons.mozilla.org. Retrieved on 2011-06-12.
  17. Homepage of «Better Privacy», with some further references to blogs and articles. Netticat.ath.cx. Retrieved on 2011-06-12.
  18. Google Chrome Browser Client-Side Storage. Hotcleaner.com. Retrieved on 2011-06-12.

Посилання[ред.ред. код]