Як подивитися Session Storage

LocalStorage, sessionStorage

Об'єкти веб-сховища localStorage та sessionStorage дозволяють зберігати пари ключ/значення у браузері.

Що в них важливо - дані, які в них записані, зберігаються після оновлення сторінки (у разі sessionStorage) і навіть після перезапуску браузера (при використанні localStorage). Незабаром ми це побачимо.

Але ж ми вже маємо куки. Навіщо ці об'єкти?

На відміну від cookie, об'єкти веб-сховища не надсилаються на сервер при кожному запиті. Саме тому ми можемо зберігати набагато більше даних. Більшість сучасних браузерів можуть виділити щонайменше 5 мегабайтів даних (або більше), і цей розмір можна змінити в налаштуваннях.
Ще одна відмінність від cookie – сервер не може маніпулювати об'єктами сховища через HTTP-заголовки. Все робиться за допомогою JavaScript.
Сховище прив'язане до джерела (домен/протокол/порт). Це означає, що різні протоколи чи піддомени визначають різні об'єкти сховища, і вони можуть отримати доступ до даних одне одного.

Об'єкти сховища localStorage та sessionStorage надають однакові методи та властивості:

setItem(key, value) – зберегти пару ключ/значення.
getItem(key) - отримати дані за ключом key.
removeItem(key) – видалити дані із ключем key .
clear() – видалити все.
key(index) – отримати ключ заданої позиції.
length – кількість елементів у сховищі.

Як бачимо, інтерфейс схожий на Map (setItem/getItem/removeItem), але також дозволяє отримати доступ до елемента за індексом - key(index).

Погляньмо, як це працює.

Демо localStorage

Основні особливості localStorage:

Цей об'єкт один на всі вкладки та вікна в рамках джерела (один і той же домен/протокол/порт).
Дані немає терміну давності, яким закінчуються і видаляються. Зберігаються після перезапуску браузера та навіть ОС.

Наприклад, якщо запустити цей код...

localStorage.setItem('test', 1);

…І закрити/відкрити браузер або відкрити ту ж сторінку в іншому вікні, то можна отримати дані таким чином:

alert( localStorage.getItem('test') ); // 1

Нам достатньо бути на тому ж джерелі (домен/протокол/порт), при цьому URL-шлях може бути різним.

Об'єкт localStorage доступний усім вікнам з одного джерела, тому якщо ми встановлюємо дані в одному вікні, зміни стають видимими в іншому.

Доступ як до звичайного об'єкту

Також можна отримувати/записувати дані, як у звичайний об'єкт:

// Встановити значення для ключа localStorage.test = 2; // отримати значення за ключем alert (localStorage.test); //2 // видалити ключ delete localStorage.test;

Це можливо з історичних причин і, як правило, працює, але зазвичай не рекомендується, тому що:

let key = 'length'; localStorage[key] = 5; // Помилка, неможливо встановити length

Перебір ключів

Методи, які ми бачимо, дозволяють читати/писати/видаляти дані. А як отримати всі значення чи ключі?

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

Але можна пройти по них, як за звичайними масивами:

Інший спосіб - використовувати цикл, як за звичайним об'єктом for key in localStorage .

Тут перебираються ключі, але разом із цим виводяться кілька вбудованих полів, які нам не потрібні:

// bad try for(let key in localStorage) <alert(key); // покаже getItem, setItem та інші вбудовані властивості >

…Тому нам потрібно або відфільтрувати поля з прототипу перевіркою hasOwnProperty :

for(let key in localStorage) < if (!localStorage.hasOwnProperty(key)) < continue; // пропустить такі ключі, як "setItem", "getItem" і так далі > alert (`$: $`); >

…Або просто отримати «власні» ключі за допомогою Object.keys, а потім за необхідності вивести їх за допомогою циклу:

let keys = Object.keys(localStorage); for(let key of keys) < alert(`$: $`); >

Остання працює, тому що Object.keys повертає лише ключі, що належать об'єкту, ігноруючи прототип.

Лише рядки

Зверніть увагу, що ключ та значення мають бути рядками.

Якщо ми використовуємо будь-який інший тип, наприклад число або об'єкт, він автоматично перетворюється на рядок:

localStorage.user = ; alert(localStorage.user); // [Object Object]

Ми можемо використовувати JSON для зберігання об'єктів:

localStorage.user = JSON.stringify(); // Трохи пізніше let user = JSON.parse (localStorage.user); alert(user.name); // John

Також можна привести до рядка весь об'єкт сховища, наприклад, для налагодження:

// для JSON.stringify додані параметри форматування, щоб об'єкт виглядав краще alert( JSON.stringify(localStorage, null, 2) );

sessionStorage

Об'єкт sessionStorage використовується набагато рідше, ніж localStorage.

Властивості та методи такі самі, але є суттєві обмеження:

sessionStorage існує лише в рамках поточної вкладки браузера.

Інша вкладка з тією самою сторінкою матиме інше сховище.
Але воно поділяється між іфреймами на тій же вкладці (за умови, що вони з одного джерела).

Погляньмо на це в дії.

sessionStorage.setItem('test', 1);

…І оновіть сторінку. Ви все ще можете отримати дані:

alert( sessionStorage.getItem('test') ); // після оновлення: 1

…Але якщо ви відкриєте ту ж сторінку в іншій вкладці і спробуєте отримати дані знову, то код поверне null , що означає «нічого не знайдено».

Так вийшло, тому що sessionStorage прив'язаний не тільки до джерела, а й до вкладки браузера. Тому sessionStorage використовується нечасто.

Подія storage

Коли оновлюються дані в localStorage або sessionStorage, генерується подія storage з наступними властивостями:

key – ключ, який оновився (null, якщо викликаний .clear()).
oldValue – старе значення ( null , якщо ключ додано вперше).
newValue – нове значення ( null , якщо ключ видалено).
url – url документа, де відбулося оновлення.
storageArea – об'єкт localStorage або sessionStorage, де відбулося оновлення.

Важливо: подія спрацьовує на всіх інших об'єктах window , де є сховище, крім того вікна, яке його викликало.

Уявіть, що у вас є два вікна з одним сайтом. Сховище локальногопомешкання розділяється між ними.

Ви можете відкрити цю сторінку у двох вікнах браузера, щоб перевірити наведений нижче код.

Тепер, якщо обидва вікна слухають window.onstorage, то кожне з них буде реагувати на оновлення, що відбулися в іншому вікні.

// спрацьовує при оновленнях, зроблених у тому ж сховищі з інших документів window.onstorage = event => < // можна також використовувати window.addEventListener('storage', event =>< if (event.key != 'now') return;alert(event.key + ':' + event.newValue + "at" + event.url); >;

Зауважте, що подія також містить: event.url – url-адресу документа, в якій дані оновилися.

Також event.storageArea містить об'єкт сховища - подія одна і та ж для sessionStorage і localStorage , тому event.storageArea посилається на те сховище, яке було змінено. Ми можемо захотіти щось записати у відповідь на зміни.

Це дозволяє різним вікнам одного джерела обмінюватись повідомленнями.

Сучасні браузери також підтримують Broadcast channel API спеціальний API для зв'язку між вікнами одного джерела, він повнофункціональніший, але менш підтримуваний. Існують бібліотеки (поліфіли), які емулюють це API на основі localStorage і роблять його доступним скрізь.

Разом

Об'єкти веб-сховища localStorage та sessionStorage дозволяють зберігати пари ключ/значення у браузері.

key та value повинні бути рядками.
Ліміт 5 Мб+ залежить від браузера.
Дані не мають «часу закінчення».
Дані прив'язані до джерела (домен/протокол/порт).

localStorage	sessionStorage
Спільно використовується між усіма вкладками та вікнами з однаковим джерелом	Розділяється в рамках вкладки браузера, серед іфреймів із того самого джерела
Переживає перезапуск браузера	"Переживає" перезавантаження сторінки (але не закриття вкладки)

setItem(key, value) – зберегти пару ключ/значення.
getItem(key) - отримати дані за ключом key.
removeItem(key) – видалити значення ключа key .
clear() – видалити все.
key(index) – отримати ключ заданої позиції.
length – кількість елементів у сховищі.
Використовуйте Object.keys, щоб отримати всі ключі.
Можна звертатися до ключів як до звичайних властивостей об'єкта, у цьому випадку подія storage не спрацьовує.

Спрацьовує при викликі setItem, removeItem, clear.
Містить всі дані про оновлення ( key/oldValue/newValue ), url документа і об'єкт сховища storageArea .
Спрацьовує на всіх об'єктах window, які мають доступ до сховища, крім того, де воно було згенероване (всередині вкладки для sessionStorage, глобально для localStorage).

Завдання

Автозбереження поля форми

Створіть поле textarea , значення якого автоматично зберігатиметься при кожній його зміні.

Коли користувач закриє сторінку і потім відкриє її знову він повинен побачити останнє введене значення.

Window: sessionStorage property

Ця особливість є добре створеною і роботою, пов'язаною з багатьма пристроями і розробниками версій. It's been available across browsers since July 2015 .

The read-only sessionStorage property accesses a session Storage object for the current origin. sessionStorage is similar to localStorage; the difference is that while data in localStorage ні expire, data in sessionStorage is cleared when the page session ends.

Whenever document loaded в особливій таблиці в браузері, на унікальній page session gets created and assigned to that particular tab.Що page session є правильним тільки для того, що особливий tab.
page session останній час, як tab або браузер є відкритим, і переміщення над page reloads and restores.
Opening page in new tab or window creates new session with value of top-level browsing context, which differs from how session cookies work.
Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.
Duplicating a tab copies tab's sessionStorage in new tab.
Під час tab/window ends session and clears objects in sessionStorage .

Data stored in sessionStorage is specific to the protocol of the page. У особливих випадках, data stored by script on a site accessed with HTTP (e.g., http://example.com/ ) is put in a different sessionStorage object from the same site accessed with HTTPS (e.g., https://example.com /).

Keys and the values are always в UTF-16 string формат, який використовує два біти для характеру. Як з об'єктами, integer keys є автоматично перетворені на strings.

Value

A Storage object which can be used до access the current origin's session storage space.

Exceptions

Thrown in one of the following cases:

origin is not avalid scheme/host/port tuple. Це може бути зроблено, якщо оригінал використовує файл: або data: schemes, for example.
The request violates a policy decision. Для прикладу, користувачі configured browsers до попередньої сторінки від пересування даних.

Зверніть увагу, що якщо користувачі блоків cookie, браузерів буде ймовірно, що interpreta це як інструкція, щоб запобігти сторінці від пересування даних.

Examples

Basic usage

// Save data to sessionStorage sessionStorage.setItem("key", "value"); // Get saved data from sessionStorage let data = sessionStorage.getItem("key"); // Remove saved data from sessionStorage sessionStorage.removeItem("key"); // Remove all saved data from sessionStorage sessionStorage.clear();

Saving text between refreshes

Наступні приклади autosaves contents of text field, і якщо браузер є резидентом, залишки тексту field content so that no writing is lost.

// Get the text field that we're going to track let field = document.getElementById("field"); // Натисніть, якщо буде автоматична вартість // (Це буде тільки звільнено, якщо на сторінці є accidentally refreshed) if (sessionStorage.getItem("autosave")) < // Restore contents of text field field.value = sessionStorage. getItem("autosave"); >// Помилка для змін у текстовому полі field.addEventListener("зміна", () => < // And save the results in the session storage object sessionStorage.setItem("autosave", field.value); >);

Note: Подивіться на використання Web Storage API article для повного прикладу.

Specifications

Browser compatibility

BCD tables only load in the browser

Веб сховище (API)

Web Storage API надає механізми, за допомогою яких браузери можуть безпечно зберігати пари ключ/значення в більш інтуїтивно зрозумілій манері, ніж cookie.

Основи Веб сховища та його використання

В основі Веб сховища лежать два механізми:

сховище сесії (sessionStorage) обслуговує область зберігання даних кожного домену, доступне протягом сесії. (поки браузер відкритий, навіть у разі перезавантаження сторінки)
локальне сховище (localStorage) робить те саме, але зберігає дані навіть у разі, якщо перевідкрити браузер.

Обидві функції доступні через Window.sessionStorage і Window.localStorage властивості (якщо бути більш точним, у браузерах, що підтримують сховища об'єкт Window виконує об'єкти WindowLocalStorage і WindowSessionStorage , які містять властивості localStorage і sessionStorage ) - виклик одного з них створює можна встановлювати, редагувати та видаляти дані.Для кожного типу сховищ і по кожному домену використовується окреме представлення Storage об'єкта - вони функціонують і управляються окремо один від одного.

Примітка: Починаючи з версії 45 Firefox, коли браузер припиняє роботу/перезавантажується обсяг даних, збережених для кожного джерела, обмежується 10 МБ. Це було зроблено, щоб уникнути проблем із пам'яттю, викликаних надмірним використанням веб-сховища.

Примітка: Доступ до веб-сховища з iFrame третьої сторони заборонено, якщо користувач вимкнув cookies третіх сторін (Firefox поводиться так з версії 43).

Примітка: Web Storage це не те саме, що mozStorage (Mozilla's XPCOM інтерфейси для SQLite) або Session store API (XPCOM утиліта зберігання для розширень).

Інтерфейси Веб сховища

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

Web Storage API розширює Window об'єкт, додаючи до нього дві нові властивості - Window.sessionStorage і Window.localStorage - які надають доступ до сесії поточного домену і до відповідних локальних Storage об'єктів, і Window.onstorage обробник подій, який спрацьовує при зміні об'єкта сховища ( наприклад, при збереженні нового елемента)

Подія storage спрацьовує на об'єкті документа Window під час зміни об'єкта сховища.

Приклади

Щоб проілюструвати типове використання веб-сховища, ми створили найпростіший приклад і назвали його Web Storage Demo. На лендингу нашого прикладу ви знайдете елементи керування для зміни фонового кольору, шрифту та зображення. Коли ви вибираєте різні опції, сторінка миттєво змінюється.На додаток, ваш вибір зберігається в локальному сховищі, щоб, якщо ви залишите сторінку і потім завантажите її знову, ваші налаштування відновилися.

Також, ми зробили сторінку виведення подій, яка виводить інформацію про сховище, коли спрацьовує подію StorageEvent . Завантажте цю сторінку в іншій вкладці браузера, потім поверніться на лендинг і поміняйте значення кольору, шрифту або зображення і погляньте, як змінюється інформація, що відображається.

Специфікації

Сумісність із браузерами

api.Window.localStorage

BCD tables only load in the browser

api.Window.sessionStorage

BCD tables only load in the browser

Приватний режим/Інкогніто

Багато браузерів у наші дні підтримують опції приватності, названі "Інкогніто" або "Приватний перегляд" тощо, що дозволяє бути впевненими, що слідів приватної сесії не залишається після закриття браузера. Це фундаментальна несумісність з Інтернет сховищем з очевидних причин. Таким чином, виробники браузерів експериментують із різними сценаріями, як впоратися з цією несумісністю.

Багато браузери вибрали стратегію, коли API сховища є доступним і здається повністю функціональним, з однією великою відмінністю - всі дані сховища стираються після закриття браузера. Для цих браузерів є ще інші інтерпретації того, що слід робити з даними, що зберігаються (від звичайного режиму браузера). Чи потрібно їм бути доступними в приватному режимі? Потім, є кілька браузерів, особливо Safari, які вибрали рішення, в якому сховище доступне, але порожнє і має квоту 0 байт, фактично, унеможливлюючи запис туди даних.

Розробники повинні бути обізнані про ці різні реалізації і брати їх до уваги при розробці веб-сайтів, що залежать від API Веб сховища. Для отримання більш детальної інформації, будь ласка, перегляньте цей пост блогу WHATWG, спеціально присвячений цій темі.