Учимся работать с куками (cookie)
Доброе время суток, уважаемые пользователи проекта http://get-element.3dn.ru! Меня очень часто просят научить работать с куками, так как это очень удобные и полезные компоненты браузера, при помощи которых можно запоминать что угодно. Именно куки позволяют запоминать, хотите вы слышать звуки в чате, получать уведомления о ЛС, включать снег и так далее
Ну что же, приступим. Для начала нам нужно тело кукисов, которое будет обрабатывать наши запросы (Вставляйте после /head):
Code
<script>
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
setCookie(name, "", -1);
};
</script>
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
setCookie(name, "", -1);
};
</script>
При работе с куками мы используем всего три функции:
1) setCookie('Имя куки', 'Значение', 'Время хранения') - данная функция записывает куку в браузер
2) eraseCookie('Имя куки') - Стирает куку с нужным именем
3) getCookie('Имя куки') - получаем значение куки
Теперь разберём пару примеров, где вам точно станет понятно, как с какими функциями работать
1) Спойлер, который будет запоминать положение открыто и закрыто
Итак, к примеру, по умолчанию у нас спойлер будет открыт:
Code
<input id="spoiler" value="Открыто" />
<div id="spcontent">Здесь контент</div>
<div id="spcontent">Здесь контент</div>
Сразу под спойлером мы вставим скрипт:
Code
<script>
$('#spoiler').click(function() { // Событие при клике по кнопке
if($('#spoiler').val()=='Открыто') // Проверяем, какое значение у кнопки, открывающей и закрывающей контент
{
setCookie('spoiler1', 1, 365); // Если спойлер открыт, устанавливаем куку с именем spoiler1, значением 1 и сроком на 365 дней
$('#spcontent').fadeOut(500); // Скрываем контент, если значение кнопки "Открыто"
$('#spoiler').val('Закрыто'); // Меняем значение кнопки на Закрыто
}
else
{
eraseCookie('spoiler1'); // Удаляем куку c именем spoiler1, если значение кнопки, открывающей и закрывающей контент, не равно "Открыто"
$('#spoiler').val('Открыто'); // Меняем значение кнопки на Открыто
$('#spcontent').fadeIn(500); // Открываем контент
};
});
if(getCookie('spoiler1')) // Проверяем, есть ли кука с именем spoiler1, когда мы переходим по страницам
{
$('#spcontent').fadeOut(500); // Скрываем контент, если кука уже была установлена
$('#spoiler').val('Закрыто'); // Меняем значение кнопки на Закрыто
}
</script>
$('#spoiler').click(function() { // Событие при клике по кнопке
if($('#spoiler').val()=='Открыто') // Проверяем, какое значение у кнопки, открывающей и закрывающей контент
{
setCookie('spoiler1', 1, 365); // Если спойлер открыт, устанавливаем куку с именем spoiler1, значением 1 и сроком на 365 дней
$('#spcontent').fadeOut(500); // Скрываем контент, если значение кнопки "Открыто"
$('#spoiler').val('Закрыто'); // Меняем значение кнопки на Закрыто
}
else
{
eraseCookie('spoiler1'); // Удаляем куку c именем spoiler1, если значение кнопки, открывающей и закрывающей контент, не равно "Открыто"
$('#spoiler').val('Открыто'); // Меняем значение кнопки на Открыто
$('#spcontent').fadeIn(500); // Открываем контент
};
});
if(getCookie('spoiler1')) // Проверяем, есть ли кука с именем spoiler1, когда мы переходим по страницам
{
$('#spcontent').fadeOut(500); // Скрываем контент, если кука уже была установлена
$('#spoiler').val('Закрыто'); // Меняем значение кнопки на Закрыто
}
</script>
Вот и всё. Вот как работает: Кликаем по кнопке. Проверяем значение кнопки. Если значение "Открыто" - устанавливаем куку, скрываем контент и меняем значение самой кнопки на "Закрыто".
Если же значение кнопки при клике "Закрыто" - стираем куку, открываем контент и меняем зачение кнопки на "Открыто".
При переходах по страницам проверяем, устанавливали ли мы куку. Если кука установлена - скрываем контент и меняем значение кнопки на закрыто
2) Запишем некое значение в куку и потом получим его при переходе на следующую страницу
Создадим две кнопки. При клике по первой - будем записывать куку, при клике по второй - стирать её:
Code
<input onclick="setCookie('timer', '$TIME', 1);" value="Установить куку" />
<input onclick="eraseCookie('timer')" value="Удалить куку" />
<input onclick="eraseCookie('timer')" value="Удалить куку" />
Итак, как вы поняли, мы будем заносить в куку значение времени. Первая кнопка записывает куку с именем timer и значением $TIME$ (Это оператор uCoz) на один день. Вторая кнопка стирает эту куку
Скрипт, который будет проверять, есть ли кука:
Code
<script>
if(getCookie('timer')) // Проверяем, есть ли кука timer
{
alert(getCookie('timer')); // Если есть - выводим сообщение со значением (Оно будет примерно 11:22:33)
}
</script>
if(getCookie('timer')) // Проверяем, есть ли кука timer
{
alert(getCookie('timer')); // Если есть - выводим сообщение со значением (Оно будет примерно 11:22:33)
}
</script>
Думаю, двух примеров с подробными пояснениями хватит, но не забывайте про комментарии. В них вы можете задать свои вопросы, если Вам что-то непонятно
-
FalleN -
3114 -
1 -
0
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...