Web Storage, Веб сховище або DOM сховище — це програмні методи і протоколи вебдодатків, що використовуються для зберігання даних у веббраузері. Вебсховище являє собою постійне сховище даних, схоже на куки, але зі значно розширеною ємністю і без пересилання інформації в заголовку запиту HTTP. Існують два основних типи вебсховища: локальне сховище (localStorage) і сесійне сховище (sessionStorage), що поводяться аналогічно постійним (Persistent cookie) і сесійним (Session cookie) кукам відповідно.
Вебсховище стандартизоване згідно WWW Консорціумом (W3C). Спочатку стандарти були частиною специфікації HTML5, але зараз є окремою специфікацією. Вебсховище підтримується Internet Explorer 8 і вище, Mozilla-браузерами (наприклад, Firefox 2+, офіційно від 3.5), Safari 4 і вище, Google Chrome 4 (підтримка sessionStorage додана від 5) і Opera починаючи з версії 10.50.
Особливості
Вебсховище спрощено можна уявляти як удосконаленні куки. Проте з куками воно має і деякі ключові відмінності.
Розмір сховища
Вебсховище підтримує набагато більше місця на диску в порівнянні з куками, яким доступно всього 4 Кб, що приблизно в 1000 разів менше ніж у вебсховища: 5 Мбайт на джерело походження в Mozilla Firefox , Google Chrome, і Opera, і в Internet Explorer 10 Мбайт.
Інтерфейс на стороні клієнта
На відміну від cookies, які можуть бути доступні як на сервері, так і на стороні клієнта, вебсховище потрапляє виключно до компетенції сценаріїв (скриптів) на боці клієнта.
Дані інтернет-сховища не передаються на сервер при кожному запиті HTTP, і вебсервер не може безпосередньо записати в Вебсховище. Однак, і одне, і друге можна явно зробити за допомогою клієнтських скриптів, що уможливлює «тонке настроювання» бажаних комунікацій з сервером.
Локальне та сесійне сховища
Вебсховище пропонує дві різних області: локальне та сесійне сховища, що відрізняються за своїми масштабами і тривалістю дії. Дані розміщуються в окреме для кожного джерела (комбінація протоколу, хосту й порту згідно з політикою того ж походження) локальне сховище (воно доступне для всіх скриптів з джерела, яке спочатку додало дані) і зберігаються після закриття браузера.
Дія сесійного сховища обмежується життям даного вікна, тобто для кожного відкритого вікна створюється нова сесія, яка припиняє своє існування при закритті вікна. Збереження сесії призначене для надання окремих екземплярів одного і того ж вебдодатку для роботи в різних вікнах, не заважаючи один одному. У випадку з куками подібне зробити вкрай важко або навіть неможливо.
Інтерфейс і модель даних
Вебсховище тепер надає кращий програмний інтерфейс ніж куки, бо має інтерфейс словнику, де ключі і значення є рядками. Додатковий API для доступу до структурованих даних на основі SQL є рекомендованим стандартом W3C.
Використання
Браузери, що підтримують вебсховище, мають глобальні змінні 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 сховища можна зберігати лише рядки. При спробі зберегти дані іншого типу вони автоматично конвертуються в рядок у більшості браузерів. Хоча попереднє перетворення у 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» чи «Інтернет-сховище» теж широко розповсюджені.
«DOM» у DOM-сховищі буквально не відповідає Document Object Model. Згідно W3C, «Назва DOM посилається на набір API доступний для скриптів у вебдодатках, і не обов'язково означає наявність самого „об'єкту документа“…»
Керування вебсховищем
Зберігання об'єктів вебсховища за умовчанням увімкнене у Mozilla Firefox і SeaMonkey, але може бути вимкнене за допомогою «about: config» параметра «dom.storage.enabled» у значення «false».
Mozilla Firefox зберігає усі об'єкти у сховищі в єдиному файлі під назвою webappsstore.sqlite. Команда sqlite3 можна використовувати, щоб показати всі збережені там елементи.
Існують розширення/додатки для Chrome та Mozilla Firefox, що дозволяють користувачам керувати вебсховищем, наприклад «Click&Clean» або «BetterPrivacy», котрі можуть регулярно очищати локальне сховище в автоматичному режимі.
Див. також
Примітки
- 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.]
- 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.]
Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет
Web Storage Veb shovishe abo DOM shovishe ce programni metodi i protokoli vebdodatkiv sho vikoristovuyutsya dlya zberigannya danih u vebbrauzeri Vebshovishe yavlyaye soboyu postijne shovishe danih shozhe na kuki ale zi znachno rozshirenoyu yemnistyu i bez peresilannya informaciyi v zagolovku zapitu HTTP Isnuyut dva osnovnih tipi vebshovisha lokalne shovishe localStorage i sesijne shovishe sessionStorage sho povodyatsya analogichno postijnim Persistent cookie i sesijnim Session cookie kukam vidpovidno Vebshovishe standartizovane zgidno WWW Konsorciumom W3C Spochatku standarti buli chastinoyu specifikaciyi HTML5 ale zaraz ye okremoyu specifikaciyeyu Vebshovishe pidtrimuyetsya Internet Explorer 8 i vishe Mozilla brauzerami napriklad Firefox 2 oficijno vid 3 5 Safari 4 i vishe Google Chrome 4 pidtrimka sessionStorage dodana vid 5 i Opera pochinayuchi z versiyi 10 50 OsoblivostiVebshovishe sprosheno mozhna uyavlyati yak udoskonalenni kuki Prote z kukami vono maye i deyaki klyuchovi vidminnosti Rozmir shovisha Vebshovishe pidtrimuye nabagato bilshe miscya na disku v porivnyanni z kukami yakim dostupno vsogo 4 Kb sho priblizno v 1000 raziv menshe nizh u vebshovisha 5 Mbajt na dzherelo pohodzhennya v Mozilla Firefox Google Chrome i Opera i v Internet Explorer 10 Mbajt Interfejs na storoni kliyenta Na vidminu vid cookies yaki mozhut buti dostupni yak na serveri tak i na storoni kliyenta vebshovishe potraplyaye viklyuchno do kompetenciyi scenariyiv skriptiv na boci kliyenta Dani internet shovisha ne peredayutsya na server pri kozhnomu zapiti HTTP i vebserver ne mozhe bezposeredno zapisati v Vebshovishe Odnak i odne i druge mozhna yavno zrobiti za dopomogoyu kliyentskih skriptiv sho umozhlivlyuye tonke nastroyuvannya bazhanih komunikacij z serverom Lokalne ta sesijne shovisha Vebshovishe proponuye dvi riznih oblasti lokalne ta sesijne shovisha sho vidriznyayutsya za svoyimi masshtabami i trivalistyu diyi Dani rozmishuyutsya v okreme dlya kozhnogo dzherela kombinaciya protokolu hostu j portu zgidno z politikoyu togo zh pohodzhennya lokalne shovishe vono dostupne dlya vsih skriptiv z dzherela yake spochatku dodalo dani i zberigayutsya pislya zakrittya brauzera Diya sesijnogo shovisha obmezhuyetsya zhittyam danogo vikna tobto dlya kozhnogo vidkritogo vikna stvoryuyetsya nova sesiya yaka pripinyaye svoye isnuvannya pri zakritti vikna Zberezhennya sesiyi priznachene dlya nadannya okremih ekzemplyariv odnogo i togo zh vebdodatku dlya roboti v riznih viknah ne zavazhayuchi odin odnomu U vipadku z kukami podibne zrobiti vkraj vazhko abo navit nemozhlivo Interfejs i model danih Vebshovishe teper nadaye krashij programnij interfejs nizh kuki bo maye interfejs slovniku de klyuchi i znachennya ye ryadkami Dodatkovij API dlya dostupu do strukturovanih danih na osnovi SQL ye rekomendovanim standartom W3C VikoristannyaBrauzeri sho pidtrimuyut vebshovishe mayut globalni zminni sessionStorage ta localStorage ob yavleni na rivni vikna Nastupnij kod na JavaScript mozhe vikoristovuvatis dlya demonstraciyi povedinki vebshovisha sessionStorage Zberigaye znachennya v brauzeri na trivalist sesiyi sessionStorage setItem key value Povertaye znachennya vidalyayetsya yaksho brauzer zakrito alert sessionStorage getItem key localStorage Zberigaye znachennya v brauzeri poza trivalistyu sesiyi localStorage setItem key value Povertaye znachennya zalishayetsya navit yaksho brauzer perevidkrito alert localStorage getItem key Dostup do danih na aktivnomu domeni Nastupnij kod distaye vsi znachennya iz lokalnogo shovisha dlya aktivnogo domenu domen storinki na yakij znahoditsya koristuvach Cej kod JavaScript mozhna vikonati za dopomogoyu instrumentiv rozrobnika sho dostupni u vsih suchasnih brauzerah var output LOCALSTORAGE DATA n n if localStorage if localStorage length for var i 0 i lt 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 Tipi danih Za dopomogoyu API shovisha mozhna zberigati lishe ryadki Pri sprobi zberegti dani inshogo tipu voni avtomatichno konvertuyutsya v ryadok u bilshosti brauzeriv Hocha poperednye peretvorennya u JSON JavaScript Object Notation umozhlivlyuye sberigannya bud yakih ob yektiv JavaScript Zberezhennya ob yektu zamist ryadka localStorage setItem key name value alert typeof localStorage getItem key string Zberezhennya cilogo chisla zamist ryadka localStorage setItem key 1 alert typeof localStorage getItem key string Zberezhennya ob yektu v JSON localStorage setItem key JSON stringify name value alert JSON parse localStorage getItem key name valueNomenklaturaChernetka W3C nazvana Web Storage ale nazvi DOM storage chi Internet shovishe tezh shiroko rozpovsyudzheni DOM u DOM shovishi bukvalno ne vidpovidaye Document Object Model Zgidno W3C Nazva DOM posilayetsya na nabir API dostupnij dlya skriptiv u vebdodatkah i ne obov yazkovo oznachaye nayavnist samogo ob yektu dokumenta Keruvannya vebshovishemZberigannya ob yektiv vebshovisha za umovchannyam uvimknene u Mozilla Firefox i SeaMonkey ale mozhe buti vimknene za dopomogoyu about config parametra dom storage enabled u znachennya false Mozilla Firefox zberigaye usi ob yekti u shovishi v yedinomu fajli pid nazvoyu webappsstore sqlite Komanda sqlite3 mozhna vikoristovuvati shob pokazati vsi zberezheni tam elementi Isnuyut rozshirennya dodatki dlya Chrome ta Mozilla Firefox sho dozvolyayut koristuvacham keruvati vebshovishem napriklad Click amp Clean abo BetterPrivacy kotri mozhut regulyarno ochishati lokalne shovishe v avtomatichnomu rezhimi Div takozhGears Kuki div Local shared object abo Flash cookie Web SQL Database PrimitkiAndyHume net 2011 http blog andyhume net localstorage is not cookies 2 kvitnya 2011 u Wayback Machine Web Storage 21 kvitnya 2021 u Wayback Machine W3 org Mozilla Developer Center DOM Storage 29 chervnya 2011 u Wayback Machine Developer mozilla org Retrieved on 2011 06 12 1 4 bereznya 2016 u Wayback Machine HTML5 Web Storage in Essence 2011 02 28 Retrieved on 2012 03 30 Introduction to Web Storage 24 bereznya 2017 u Wayback Machine Microsoft Developer Network msdn microsoft com Retrieved on 2014 08 05 W3C Web Storage draft standard 1 lyutogo 2011 u Wayback Machine Dev w3 org 2004 02 05 Retrieved on 2011 06 12 W3C Indexed Database API 2 lyutogo 2011 u Wayback Machine W3C Stanom na 08 01 2015 W3C 2011 http dev w3 org html5 webstorage 1 lyutogo 2011 u Wayback Machine Mozilla Developer Center DOM Storage 29 chervnya 2011 u Wayback Machine Developer mozilla org Retrieved on 2011 06 12 MSDN Introduction to DOM Storage 14 sichnya 2015 u Wayback Machine Msdn microsoft com Retrieved on 2011 06 12 W3C Web Storage draft standard 1 lyutogo 2011 u 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 grudnya 2016 u Wayback Machine Cerias January 16 2008 Click amp Clean extension for Google Chrome 15 lyutogo 2017 u Wayback Machine Hotcleaner com 2011 06 01 Retrieved on 2011 06 12 Click amp Clean add on for Mozilla Firefox 4 veresnya 2014 u Wayback Machine Addons mozilla org Retrieved on 2011 06 12 Mozilla add ons page for Better Privacy 4 veresnya 2014 u Wayback Machine Addons mozilla org Retrieved on 2011 06 12 Homepage of Better Privacy with some further references to blogs and articles 23 serpnya 2011 u Wayback Machine Netticat ath cx Retrieved on 2011 06 12 Google Chrome Browser Client Side Storage 22 listopada 2016 u Wayback Machine Hotcleaner com Retrieved on 2011 06 12 PosilannyaW3C Web Storage 21 kvitnya 2021 u Wayback Machine Mozilla Developer Center Web Storage API 1 kvitnya 2021 u Wayback Machine Opera Web Storage easier more powerful client side data storage 12 lipnya 2020 u Wayback Machine BB10 HTML5 WebWorks Api Reference 29 travnya 2013 u Wayback Machine