Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Добавляем хранилище данных для HTML5

.

Добавляем хранилище данных для HTML5

Мы можем использовать API Web Storage для функции «Запомнить меня на этом компьютере», используемой на странице регистрации. Если включить ее, то пользователю достаточно будет заполнить все формы на сайте только один раз; ввведенные один раз данные сохранятся в системе. Напишем функцию, которая с помощью jQuery извлекает значения из полей ввода «имя» и «адрес e-mail»:

Добавляем хранилище данных для HTML5

Здесь мы просто сохранили эти значения в неременных email и name соответственно. Следующим шагом мы должны записать их в объект localStorage:

Добавляем хранилище данных для HTML5

Давайте также запишем в локальное хранилище информацию о том, что в чекбоксе «Запомнить меня» проставлена галочка:

Добавляем хранилище данных для HTML5

Теперь у нас есть функция для сохранения имени пользователя и адреса его электронной почты; необходимо, чтобы она активировалась, когда пользователь ставит галочку в поле «Запомнить меня». Мы сделаем это, отслеживая событие, связанное с изменением статуса чек-бокса — оно может произойти при щелчке мышью по боксу, по метке бокса или при нажатии клавиши:

Добавляем хранилище данных для HTML5

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

Добавляем хранилище данных для HTML5

Добавляем хранилище данных для HTML5

Новая строка кода вызывает метод jQuery attr ("checked"), возвращающий значение true, если галочка проставлена, и false — если нет. Наконец надо убедиться, что браузер имеет локальное хранилище данных:

Добавляем хранилище данных для HTML5

Теперь, если проставлена галочка в чекбоксе, а браузер поддерживает локальное хранилище данных, мы сохраняем имя и адрес электронной почты посетителя. Проблема только в том, что мы что-то должны сделать с этими данными! Добавим еще одну функцию, которая будет проверять, сохранены ли в локальном хранилище имя пользователя и адрес его электронной почты, и если да, то соответствующие поля ввода должны быть заполнены данными. Добавим еще предварительную проверку состояния чекбокса «Запомнить меня»:

Добавляем хранилище данных для HTML5

Добавляем хранилище данных для HTML5

Ну и наконец мы вызываем функцию loadStoredDetails, как только загрузится страница:

Добавляем хранилище данных для HTML5

Таким образом, если при предыдущем визите пользователь поставил галочку в чекбоксе «Запомнить меня на этом компьютере», его имя и адрес электронной почты будут автоматически подставлены в соответствующие поля ввода при последующих посещениях страницы.

Просмотр содержимого веб-хранилища данных с помощью Web Inspector

С помощью инструмента Web Inspector, имеющегося в браузерах Safari и Chrome, мы можем просмотреть и даже изменить содержимое локального хранилища данных.

В Safari мы можем просматривать сохраненные данные в закладке Storage, как показано на рис. 10.6.

Добавляем хранилище данных для HTML5

Рис. 10.6. Просмотр данных, сохраненных в локальном и сессионном хранилище

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

Если вы произведете двойной щелчок мышью на значении «етаіі» в закладке Storage инструмента Web Inspector во время просмотра страницы register.html, вы действительно сможете изменить эти данные, как показано на рис. 10.7.

Добавляем хранилище данных для HTML5

Рис. 10.7. Изменение данных в локальном хранилище

Как программисты мы ничего не можем сделать, чтобы предотвратить изменение данных, хранящихся на стороне клиента. Надо просто иметь это в виду. Вдобавок спецификация Web Storage предусматривает, что любой инструмент браузера, позволяющий очищать куки, должен давать пользователю также очищать и данные, находящиеся в локальном хранилище. Если мы на 100% можем быть уверены, что данные записаны в локальном хранилище, то уверенности в том, что они там остались, мы иметь никогда не будем.

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

Если вы хотите получить дополнительные сведения о Web Storage, обратитесь к следующим ресурсам:

• Спецификация W3C’s Web Storage1;

• Документация Сети разработчиков Mozilla2;

• Что такое Web Storage?3


.

Читайте так же:
Not found