Как использовать Cookie & HTML5 localStorage

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

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

Давайте начнем, не так ли?

Рекомендуемое чтение: HTML5 атрибут Contenteditable – редактирование веб-контента на внешнем интерфейсе

Использование Cookie

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

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

В этом примере мы назовем Cookie IntroJS и сохраним его в переменной с именем name, а значение будет сохранено в переменной с именем value.

var name = ‘IntroJS’;
значение переменной = $ .cookie (имя);

Затем, используя метод .oncomplete (), предоставленный в IntroJS, мы можем установить Cookie в браузере. Используя следующий код в качестве примера, как только пользователь нажмет кнопку «Готово» на всплывающей подсказке, будет создан файл cookie с именем IntroJS со значением один.

introJs (). start (). oncomplete (function () {
$ .cookie (имя, 1);
}

Теперь обновите браузер и заполните руководство. Если вы используете Google Chrome, просто перейдите в «Просмотр»> «Разработчик»> «Инструменты разработчика»> «Ресурсы» (вкладка) – вы увидите, что файл cookie создан (снимок экрана).

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

if (значение == ноль) {
introJs (). start (). oncomplete (function () {
$ .cookie (имя, 1);
}
};

Однако недостатком использования Cookie является то, что срок его действия истекает. Если явно не указано, Cookie станет Session Coookie, что означает, что он будет удален, когда пользователь закроет браузер.

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

Использование HTML5 localStorage

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

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

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

var name = ‘IntroJS’;
var value = localStorage.getItem (name);

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

if (значение == ноль) {
introJs (). start (). oncomplete (function () {
localStorage.setItem (name, 1)
});
};

Теперь обновите ваш браузер и заполните пошаговое руководство. Затем перейдите в View> Developer> Developer Tool> Resources (Tab) – в разделе 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 (имя);
var func = function () {
if (Modernizr.localstorage) {
localStorage.setItem (name, 1)
} еще {
$ .cookie (name, 1, {
истекает: 365
});
}
};
if (значение == ноль) {
introJs () начать () OnComplete (FUNC) .onexit (FUNC)..;
};

Этот код использует Modernizr определить функции браузера. Он будет использовать localStorage, если браузер его поддерживает; в противном случае он будет использовать куки-файлы.

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