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]
Див. також
- Gears
- Куки
- Indexed Database API
- Локальні спільні об'єкти (див. «Local shared object» або «Flash cookie»)
- Веб SQL база даних (Web SQL Database)
Примітки
- ↑ AndyHume.net, 2011 http://blog.andyhume.net/localstorage-is-not-cookies [Архівовано 2 квітня 2011 у Wayback Machine.]
- ↑ Web Storage [Архівовано 21 квітня 2021 у Wayback Machine.]. W3.org
- ↑ Mozilla Developer Center: DOM Storage [Архівовано 29 червня 2011 у Wayback Machine.]. Developer.mozilla.org. Retrieved on 2011-06-12.
- ↑ [1] [Архівовано 4 березня 2016 у Wayback Machine.]. HTML5 Web Storage in Essence (2011-02-28). Retrieved on 2012-03-30.
- ↑ Introduction to Web Storage [Архівовано 24 березня 2017 у Wayback Machine.]. Microsoft Developer Network, msdn.microsoft.com. Retrieved on 2014-08-05.
- ↑ W3C: Web Storage draft standard [Архівовано 1 лютого 2011 у Wayback Machine.]. Dev.w3.org (2004-02-05). Retrieved on 2011-06-12.
- ↑ W3C: Indexed Database API [Архівовано 2 лютого 2011 у Wayback Machine.]. W3C. Станом на 08.01.2015
- ↑ W3C, 2011 http://dev.w3.org/html5/webstorage/ [Архівовано 1 лютого 2011 у Wayback Machine.]
- ↑ Mozilla Developer Center: DOM Storage [Архівовано 29 червня 2011 у Wayback Machine.]. Developer.mozilla.org. Retrieved on 2011-06-12.
- ↑ MSDN: Introduction to DOM Storage [Архівовано 14 січня 2015 у Wayback Machine.]. Msdn.microsoft.com. Retrieved on 2011-06-12.
- ↑ W3C: Web Storage draft standard [Архівовано 1 лютого 2011 у Wayback Machine.]. Dev.w3.org (2004-02-05). Retrieved on 2011-06-12.
- ↑ Mozillazine article on disabling Web Storage Objects in about:config. Kb.mozillazine.org. Retrieved on 2011-06-12.
- ↑ Firefox's Super Cookies [Архівовано 25 грудня 2016 у Wayback Machine.], Cerias, January 16, 2008
- ↑ «Click&Clean» extension for Google Chrome [Архівовано 15 лютого 2017 у Wayback Machine.]. Hotcleaner.com (2011-06-01). Retrieved on 2011-06-12.
- ↑ "Click&Clean add-on for Mozilla Firefox [Архівовано 4 вересня 2014 у Wayback Machine.]. Addons.mozilla.org. Retrieved on 2011-06-12.
- ↑ Mozilla add-ons page for «Better Privacy» [Архівовано 4 вересня 2014 у Wayback Machine.]. Addons.mozilla.org. Retrieved on 2011-06-12.
- ↑ Homepage of «Better Privacy», with some further references to blogs and articles [Архівовано 23 серпня 2011 у Wayback Machine.]. Netticat.ath.cx. Retrieved on 2011-06-12.
- ↑ Google Chrome Browser Client-Side Storage [Архівовано 22 листопада 2016 у Wayback Machine.]. Hotcleaner.com. Retrieved on 2011-06-12.
Посилання
- W3C: Web Storage [Архівовано 21 квітня 2021 у Wayback Machine.]
- MSDN: Introduction to DOM Storage
- Mozilla Developer Center: Web Storage API [Архівовано 1 квітня 2021 у Wayback Machine.]
- Opera: Web Storage: easier, more powerful client-side data storage [Архівовано 12 липня 2020 у Wayback Machine.]
- BB10: HTML5 WebWorks Api Reference [Архівовано 29 травня 2013 у Wayback Machine.]
- п
- о
- р
Можливості · стандарти · протоколи | |||||||
---|---|---|---|---|---|---|---|
|
Діючі | |||||||||
---|---|---|---|---|---|---|---|---|---|
|
Розробку припинено | |||||||||
---|---|---|---|---|---|---|---|---|---|
|
Категорія
- Порівняння
Товстим шрифтом виділені популярні браузери