—»     —»   Учимся использовать cookie и HTML5 localStorage
  Раздел: Руководства   Нет комментариев  

Учимся использовать cookie и HTML5 localStorage

Относительно недавно мы публиковали материал по использованию Intro.js. После этого несколько читателей поинтересовались у нас, каким образом они могут сделать так, чтобы гид по сайту появлялся только один раз. Другими словами, как только пользователь проходит это знакомство, оно больше не будет появляться при последующих посещениях страницы этим же пользователем.

Существует множество способов добиться такого эффекта, но сегодня мы хотим рассказать вам об особом методе, с использованием Cookie и localStorage. Короче говоря, как Cookie, так и localStorage способны хранить информацию в браузере, которую можно использовать для определения, нужно ли показывать пошаговый гид по сайту.

Давайте сразу же приступим!

Применение Cookie

Мы используем jQuery-плагин Cookie, чтобы наш код оставался как можно более простым. Скачайте jQuery Cookie отсюда, поместите его в ваш HTML-документ рядом с jQuery следующим образом:

<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>

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

В данном примере мы задаем название Cookie IntroJs и помещаем ее в переменную под названием name, в то время как значение будет храниться в переменной ‘value’.

var name = 'IntroJS';
var value = $.cookie(name);

Далее, используя метод .oncomplete(), который представлен в IntroJs, мы можем выставить cookie в браузере. Используя следующий код в качестве примера, как только пользователь кликает по кнопке ‘Done’ в подсказках, создается cookie под названием IntroJs со значением 1.

introJs().start().oncomplete(function() {
$.cookie(name, 1);
}

Теперь, обновите браузер и пройдите по гиду. Если вы используете Google Chrome, то просто пройдите в меню View > Developer > Developer Tools > Resources (вкладка), где можно будет видеть, что Cookie были созданы (скриншот).

Учимся использовать cookie и HTML5 localStorage

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

if(value == null) {
introJs().start().oncomplete(function() {
$.cookie(name, 1);
}
};

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

Даже если вы используете время истечения, это все равно не будет идеальным решением, так как все равно срок действия кукисов когда-нибудь истечет. Итак, давайте рассмотрим второе, более продуманное решение, - localStorage.

Применение HTML5 localStorage

Вкратце, localStorage работает наподобие базы данных, - эта функция хранит фрагменты данных – ключ и значение – локально в браузере пользователя. Следовательно, вы можете запросить их при помощи javascript API. В отличие от Cookie, localStorage сохраняется постоянно.

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

Для начала, давайте выставим название и значение ключа. Для нашей информации мы используем .getItem(), чтобы получить значение из ключа localStorage.

var name = 'IntroJS';
var value = localStorage.getItem(name);

Так же, как и в нашем первом примере с Cookies, мы запустим функцию introjs только в том случае, если необходимые данные отсутствуют. Другими словами, как только эти данные появятся в браузере, гид более не будет отображаться. Используя localStorage, мы можем выставить данные посредством .setItem() следующим образом:

if(value == null) {
introJs().start().oncomplete(function() {
localStorage.setItem(name, 1)
});
};

Теперь перезагрузите браузер и пройдите пошаговый гид. Затем, пройдите в меню View > Developer > Developer Tool > Resources (вкладка) – в разделе LocalStorage вы должны видеть новый ключ с установленными значениями.

Учимся использовать cookie и HTML5 localStorage

Пожалуйста учтите, что localStorage – это сравнительно новая технология. И судя по CanIUse.com, localStorage поддерживается только в следующих браузерах (на момент написания статьи): IE8+, Firefox 3.5+, Chrome 4.0+, Safari 4.0+, и Opera 10.5+.

Если же, по каким-либо причинам, вам нужно охватить сегмент пользователей с устаревшими браузерами, вы можете использовать localStorage в комбинации с Cookies. Предлагаем вам примерный код:

var name = 'IntroJS';
var value = localStorage.getItem(name) || $.cookie(name);
var func = function() {
if (Modernizr.localstorage) {
localStorage.setItem(name, 1)
} else {
$.cookie(name, 1, {
expires: 365
});
}
};
if(value == null) {
introJs().start().oncomplete(func).onexit(func);
};

В данном коде для определения способностей браузера используется Modernizr. Он применит localStorage, если в браузере имеется соответствующая поддержка. Если же нет, то будет использоваться Cookies.

И на этом все, друзья! Надеемся, что вам понравилось данное руководство, и вы найдете ему применение. Для более подробной информации, вы можете обратиться к нашим прошлым публикациям, посвященным Modernizr.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: cookies, jQuery, javascript, интро
Опубликовал Design FactoRy   Прочитано (раз): 8265   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031