Учимся работать с куками (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>


При работе с куками мы используем всего три функции:

1) setCookie('Имя куки', 'Значение', 'Время хранения') - данная функция записывает куку в браузер
2) eraseCookie('Имя куки') - Стирает куку с нужным именем
3) getCookie('Имя куки') - получаем значение куки

Теперь разберём пару примеров, где вам точно станет понятно, как с какими функциями работать


1) Спойлер, который будет запоминать положение открыто и закрыто

Итак, к примеру, по умолчанию у нас спойлер будет открыт:

Code
<input id="spoiler" value="Открыто" />
  <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>


Вот и всё. Вот как работает: Кликаем по кнопке. Проверяем значение кнопки. Если значение "Открыто" - устанавливаем куку, скрываем контент и меняем значение самой кнопки на "Закрыто".

Если же значение кнопки при клике "Закрыто" - стираем куку, открываем контент и меняем зачение кнопки на "Открыто".

При переходах по страницам проверяем, устанавливали ли мы куку. Если кука установлена - скрываем контент и меняем значение кнопки на закрыто


2) Запишем некое значение в куку и потом получим его при переходе на следующую страницу

Создадим две кнопки. При клике по первой - будем записывать куку, при клике по второй - стирать её:

Code
<input onclick="setCookie('timer', '$TIME', 1);" value="Установить куку" />
  <input onclick="eraseCookie('timer')" value="Удалить куку" />


Итак, как вы поняли, мы будем заносить в куку значение времени. Первая кнопка записывает куку с именем timer и значением $TIME$ (Это оператор uCoz) на один день. Вторая кнопка стирает эту куку

Скрипт, который будет проверять, есть ли кука:
Code
<script>
  if(getCookie('timer')) // Проверяем, есть ли кука timer
  {
  alert(getCookie('timer')); // Если есть - выводим сообщение со значением (Оно будет примерно 11:22:33)
  }
  </script>


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

  • FalleN

  • 3114

  • 1

  • 0

Ссылки на статью:

Похожие статьи:

Комментарии:

Аватар пользователя FalleN
FalleN
Отвечаю сразу на вопросы!

Вопрос 1: Могу я присвоить переменной функцию "геткука"?
var my_like_cookie=getCookie('ololoшка');

Вопрос 2: setCookie('ololoшка', 'Я люблю себя', ???) Могу ли назначить время хранения - бесконечностью? И максимально ли год, для хранения кука?

Вопрос 3: Можно ли защитить куку от удаления?)) Знаю, что нет.. ок да

1)Конечно!
2)Да
3)Неа