DataLife Engine > Версия для печати > Учимся использовать cookie и HTML5 localStorage

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

Применение Cookie

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

Затем нам нужно указать имя 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 были созданы (скриншот). Как ранее уже было отмечено, нам не нужно, чтобы гид показывался еще раз тем пользователям, которые уже проходили его. Чтобы сделать это, оберните функцию 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 вы должны видеть новый ключ с установленными значениями. Пожалуйста учтите, что 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.

Техно-мир