LocalStorage, SessionStorage, Cookie

Август 22, 2022

Главная
Информатика
LocalStorage, SessionStorage, Cookie

Содержание

2. Идея С появлением веб-приложений потребовалось хранить пользовательскую информацию непосредственно на клиентском компьютере. Информация, относящаяся к конкретному
3. Cookie Сооkiе-файлы изначально были предназначены для сохранения сведений о сеансе на клиентском компьютере. Спецификация предписывала серверу
4. Cookie Этот НТТР-ответ задает сооkiе-файл с именем "name" и значением "значение". И имя, и значение при
5. Cookie Эти дополнительные сведения сервер может использовать для идентификации клиента, который отправил запрос. Сооkiе-файлы по природе
6. Cookie Доступ к куки непосредственно из браузера, используя свойство document.cookie. Значение document.cookie состоит из пар ключ=значение,
7. Cookie Настройки куки: path=/, по умолчанию устанавливается текущий путь, делает куки видимым только по указанному пути
8. Storage Тип Storage позволяет хранить пары имен и значений, при этом максимальный объем хранилища определяется браузером.
9. sessionStorage Объект sessionStorage хранит данные только в течение сеанса, то есть до закрытия браузера (в этом
10. sessionStorage sessionStorage существует только в рамках текущей вкладки браузера. Другая вкладка с той же страницей будет
11. localStorage Основные особенности localStorage: Этот объект один на все вкладки и окна в рамках источника (один
12. Методы setItem(key, value) – сохранить пару ключ/значение. getItem(key) – получить данные по ключу key. removeItem(key) –
13. Событие storage Когда обновляются данные в localStorage или sessionStorage, генерируется событие storage window.onstorage = event =>
14. Задача 1 Создать страницу: поле ввода имени и кнопка сохранить. При нажатии кнопки - данные сохраняются
16. Скачать презентацию

Слайд 2

Идея
С появлением веб-приложений потребовалось хранить пользовательскую информацию непосредственно на клиентском компьютере.

Информация, относящаяся к конкретному пользователю, должна находиться на его компьютере, будь то сведения для входа в систему, предпочтения или другие данные.

Слайд 3

Cookie
Сооkiе-файлы изначально были предназначены для сохранения сведений о сеансе на клиентском

компьютере. Спецификация предписывала серверу отправлять в любом ответе на НТТР-запрос НТТР-заголовок set-Cookie со сведениями о сеансе.

Слайд 4

Cookie
Этот НТТР-ответ задает сооkiе-файл с именем "name" и значением "значение". И

имя, и значение при отправке кодируются в формате URL-aдpeca. Браузер сохраняет эти сведения о сеансе и при каждом последующем запросе отправляет их серверу в НТТР-заголовке Cookie

Слайд 5

Cookie
Эти дополнительные сведения сервер может использовать для идентификации клиента, который отправил

запрос.
Сооkiе-файлы по природе связаны с конкретным доменом. Заданный сооkiе-файл прилагается к запросам, отправляемым в тот домен, в котором файл был создан. Это ограничение гарантирует, что информация, сохраненная в сооkiе-файле, будет доступна только одобренным получателям и не сможет попасть в другие домены.

Слайд 6

Cookie
Доступ к куки непосредственно из браузера, используя свойство document.cookie.
Значение document.cookie состоит

из пар ключ=значение, разделённых ;. Каждая пара представляет собой отдельное куки.
Запись в document.cookie обновит только упомянутые в ней куки, но при этом не затронет все остальные.

Слайд 7

Cookie
Настройки куки:
path=/, по умолчанию устанавливается текущий путь, делает куки видимым только

по указанному пути и ниже.
domain=site.com, по умолчанию куки видно только на текущем домене, если явно указан домен, то куки видно и на поддоменах.
expires или max-age устанавливает дату истечения срока действия, без них куки умрёт при закрытии браузера.
secure делает куки доступным только при использовании HTTPS.
samesite запрещает браузеру отправлять куки с запросами, поступающими извне, помогает предотвратить XSRF-атаки.

Слайд 8

Storage
Тип Storage позволяет хранить пары имен и значений, при этом

максимальный объем хранилища определяется браузером.

Слайд 9

sessionStorage
Объект sessionStorage хранит данные только в течение сеанса, то есть до

закрытия браузера (в этом смысле он похож на сеансовый cookie). Данные, сохраненные в объекте sessionStorage, остаются в нем при обновлениях страницы

Слайд 10

sessionStorage
sessionStorage существует только в рамках текущей вкладки браузера.
Другая вкладка с той

же страницей будет иметь другое хранилище.
Но оно разделяется между фреймами на той же вкладке (при условии, что они из одного и того же источника).
Данные продолжают существовать после перезагрузки страницы, но не после закрытия/открытия вкладки.

Слайд 11

localStorage
Основные особенности localStorage:
Этот объект один на все вкладки и окна в

рамках источника (один и тот же домен/протокол/порт).
Данные не имеют срока давности, по которому истекают и удаляются. Сохраняются после перезапуска браузера и даже ОС.

Слайд 12

Методы
setItem(key, value) – сохранить пару ключ/значение.
getItem(key) – получить данные по ключу

key.
removeItem(key) – удалить данные с ключом key.
clear() – удалить всё.
key(index) – получить ключ на заданной позиции.
length – количество элементов в хранилище.

Слайд 13

Событие storage
Когда обновляются данные в localStorage или sessionStorage, генерируется событие storage
window.onstorage

= event => {
};

Слайд 14

Задача 1
Создать страницу: поле ввода имени и кнопка сохранить. При нажатии

кнопки - данные сохраняются в localstorage и на экране исчезают эти поля и кнопка и появляется сообщение - Добро пожаловать, (имя)
При перезагрузке страницы, если в localstorage есть эти данные - сообщение должно остаться на экране

LocalStorage, SessionStorage, Cookie

Содержание

ИдеяС появлением веб-приложений потребовалось хранить пользовательскую информа­цию непосредственно на клиентском компьютере.

CookieСооkiе-файлы изначально были предназначены для сохранения сведений о сеансе на клиентском

CookieЭтот НТТР-ответ задает сооkiе-файл с именем "name" и значением "значение". И

CookieЭти дополнительные сведения сервер может использовать для идентификации клиента, который отправил

CookieДоступ к куки непосредственно из браузера, используя свойство document.cookie.Значение document.cookie состоит

CookieНастройки куки:path=/, по умолчанию устанавливается текущий путь, делает куки видимым только

Storage Тип Storage позволяет хранить пары имен и значений, при этом

sessionStorageОбъект sessionStorage хранит данные только в течение сеанса, то есть до

sessionStoragesessionStorage существует только в рамках текущей вкладки браузера.Другая вкладка с той

localStorageОсновные особенности localStorage:Этот объект один на все вкладки и окна в

МетодыsetItem(key, value) – сохранить пару ключ/значение.getItem(key) – получить данные по ключу

Событие storageКогда обновляются данные в localStorage или sessionStorage, генерируется событие storagewindow.onstorage

Задача 1Создать страницу: поле ввода имени и кнопка сохранить. При нажатии

Похожие презентации