5.02.14, 22:37
0 комментарий
  Уроки

Учимся использовать 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.

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204