Web Storage

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

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

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

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

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

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

Наступний код дістає всі значення із локального сховища для активного домену (домен сторінки, на якій знаходиться користувач). Цей код 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