Хранение Данных На Клиентском Компьютере

HTML5 предлагает два новых объекта для хранения данных на клиентском компьютере:

• localStorage (локальное хранилище) - хранит данные без лимита по времени
• sessionStorage (сессионное хранилище) - хранит данные в течение одной сессии

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

В HTML5 данные НЕ пересылаются с каждым запросом к серверу, а используются ТОЛЬКО по необходимости. Можно хранить большие объемы данных без уменьшения производительности веб сайта.

Данные хранятся в различных местах для разных веб сайтов, и каждый веб сайт имеет доступ только к тем данным, которые он сам сохранил.

HTML5 использует JavaScript для хранения и доступа к данным.

Объект localStorage (Локальное Хранилище)

Объект localStorage хранит данные без ограничения по времени. Данные будут доступны на следующие день, неделю, или год.

Как создавать и обращаться к локальному хранилищу:

Пример <script type="text/javascript"> localStorage.lastname="Иванов"; document.write(localStorage.lastname); </script> Попробуйте сами »

Следующий пример считает количество посещений страницы пользователем:

Пример <script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Посещения "+ localStorage.pagecount + " раз."); </script> Попробуйте сами »

 

Объект sessionStorage (Сессионное Хранилище)

Объект sessionStorage хранит данные в течение одной сессии. Данные удаляются, когда пользователь закрывает окно браузера.

Как создавать и обращаться к сессионному хранилищу:

Пример <script type="text/javascript"> sessionStorage.lastname="Петров"; document.write(sessionStorage.lastname); </script> Попробуйте сами »

Следующий пример считает количество посещений страницы пользователем в текущей сессии:

Пример <script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Посещения "+sessionStorage.pagecount+" раз в эту сессию."); </script> Попробуйте сами »

HTML5 Новые Типы Ввода

HTML5 имеет несколько новых типов ввода для форм. Эти нововведения позволяют лучше контролировать ввод данных и их проверку.

Этот урок HTML5 охватывает новые типы ввода:

• email (электронная почта)
• url (адрес в интернете)
• number (число)
• range (диапазон)
• Выбор даты: date (дата), month (месяц), week (неделя), time (время), datetime (дата и время), datetime-local (местные дата и время)
• search (поиск)
• color (цвет)

Поддержка Браузеров

Тип ввода	IE	Firefox	Opera	Chrome	Safari
email (электронная почта)	Нет	4.0	9.0	10.0	Нет
url (адрес в интернете)	Нет	4.0	9.0	10.0	Нет
number (число)	Нет	Нет	9.0	7.0	Нет
range (диапазон)	Нет	Нет	9.0	4.0	4.0
Сердства выбора даты	Нет	Нет	9.0	10.0	5.1
search (поиск)	Нет	4.0	11.0	10.0	Нет
color (цвет)	Нет	Нет	11.0	12	Нет

Замечание: Opera имеет наилучшую поддержку для новых типов ввода Однако, вы можете уже сейчас начать их использование во всех основных браузерах. Если типы ввода не поддерживаются, то они будут вести себя как обычные текстовые поля.

Тип Ввода - email (Электронная Почта)

Тип email используется для полей ввода, которые должны содержать адреса электронной почты.

Значение поля email автоматически проверяется при отправке формы.

Пример Электронная почта: <input type="email" name="user_email" /> Попробуйте сами »

Совет: Safari на iPhone распознает тип ввода email и изменяет экранную клавиатуру для ввода адреса (добавляет опции @ и .com).

Тип Ввода - url (Адрес в Интернете)

Тип url используется для полей ввода, которые должны содержать адрес URL.

Значение поля url автоматически проверяется при нажатии кнопки "Отправить" на форме.

Пример Домашняя страница: <input type="url" name="user_url" /> Попробуйте сами »

Совет: Браузер Safari на iPhone определяет тип ввода url и соответственно изменяет клавиатуру для ввода URL-адреса (добавляет опцию .com).

Тип Ввода - number (Число)

Числовой тип используется для полей ввода числовых значений.

Вы также можете указать ограничения на вводимые числа:

Пример Введите число: <input type="number" name="points" min="1" max="10" /> Попробуйте сами »

Используйте следующие атрибуты для указания ограничений для типа number:

Атрибут	Значение	Описание
max	число	Определяет максимальное допустимое значение
min	число	Определяет минимальное допустимое значение
step	число	Указывает допустимые числовые интервалы (если step="3", то можно будет вводить числа -3,0,3,6, и т.д.)
value	число	Указывает значение по умолчанию

Вот пример со всеми атрибутами ограничений: Попробуйте сами

Совет: Safari на iPhone распознает числовой тип ввода и подгоняет экранную клавиатуру под ввод чисел.

Тип Ввода - range (Диапазон)

Тип range используется для полей ввода, которые должны содержать значение из диапазона чисел.

Тип range отображается как ползунок на линейке со шкалой.

Вы можете также установить ограничения на вводимые числа:

Пример <input type="range" name="points" min="1" max="10" /> Попробуйте сами »

Используйте следующие атрибуты, чтобы задать ограничения на диапазон:

Атрибут	Значение	Описание
max	число	Указывает максимальное допустимое значение
min	number	Указывает минимальное допустимое значение
step	число	Определяет числовые интервалы (если step="3", то можно будет выбрать числа из диапазона -3,0,3,6, и т.д.)
value	число	Значение по умолчанию

 

Тип Ввода - Выбор Даты

HTML5 имеет несколько новых типов ввода для выбора даты и времени:

• date - Выбор даты, месяца и года
• month - Выбор месяца и года
• week - Выбор недели и года
• time - Указать время (часы и минуты)
• datetime - Указать время, дату, месяц и год (универсальное время UTC)
• datetime-local - Указать время, дату, месяц и год (местное время)

Следующий пример позволяет вам выбрать дату из календаря:

Пример Дата: <input type="date" name="user_date" /> Попробуйте сами »

Тип ввода "month": Попробуйте сами

Тип ввода "week": Попробуйте сами

Тип ввода "time": Попробуйте сами

Тип ввода "datetime": Попробуйте сами

Тип ввода "datetime-local": Попробуйте сами

Тип Ввода - search (Поиск)

Тип search используется для полей поиска, наподобие поиска по сайту, или поиска Google.

Поле поиска search ведет себя также, как и обычное текстовое поле.

Тип Ввода - color (Цвет)

Тип color применяется для полей указания цвета.

Браузер Opera позволит вам выбрать цвет из цветовой палитры, браузер Chrome компании Google разрешит отправлять форму только с шестнадцатеричным значением в поле типа color:

HTML5 Новые Атрибуты Форм

Этот урок расскажет о некоторых атрибутах для элементов <form> и <input>.

Новые атрибуты form:

• autocomplete (автозаполнение)
• novalidate (не проверять)

Новые атрибуты input:

• autocomplete (автозаполнение)
• autofocus (автофокус)
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height и width
• list
• min, max и step
• multiple
• pattern (regexp)
• placeholder
• required

Поддержка Браузерами

Атрибут	IE	Firefox	Opera	Chrome	Safari
autocomplete	8.0	3.5	9.5	3.0	4.0
autofocus	Нет	4.0	10.0	3.0	4.0
form	Нет	4.0	9.5	10.0	Нет
form overrides	Нет	4.0	10.5	10.0	Нет
height and width	8.0	3.5	9.5	3.0	4.0
list	Нет	4.0	9.5	Нет	Нет
min, max and step	Нет	Нет	9.5	3.0	Нет
multiple	Нет	3.5	11.0	3.0	4.0
novalidate	Нет	4.0	11.0	10.0	Нет
pattern	Нет	4.0	9.5	3.0	Нет
placeholder	Нет	4.0	11.0	3.0	3.0
required	Нет	4.0	9.5	3.0	Нет

 

---

Дата добавления: 2019-01-14; просмотров: 186; Мы поможем в написании вашей работы!

Поделиться с друзьями:

---

---

Мы поможем в написании ваших работ!