Web Storage

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

Розмір сховища

Вебсховище підтримує набагато більше місця на диску в порівнянні з куками, яким доступно всього 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// Збереження об’єкту в JSONlocalStorage.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)

• 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.]