Как легко и просто управлять cookies при помощи jQuery » Techno-Co — Всё для вебмастера, для создание сайтов с нуля.

05.08.2014
Без рубрики

Позвольте нам рассказать, как при помощи jQuery Cookies можно реализовать очень простую систему аутентификации. Весь код будет представлен на внешнем интерфейсе, но для того, чтобы увидеть результаты работы, вам понадобится live-сервер для тестирования. Браузерные cookies будут создавать на локальный IP, предложенный веб-сервером, а это значит, что к сожалению вы не сможете запускать эти скрипты локально. Не забудьте ознакомиться с live-демо, чтобы понять, о чем пойдет речь.

Основа документа

Для начала мы создадим примерный HTML5-документ с единственной ссылкой на библиотеку jQuery, а также с функцией jQuery Cookies. Вы можете скачать их напрямую с Github Repo, и единственный файл, который нам понадобится, это jquery.cookie.js.






  Managing Cookies with jQuery - Live Demo

Руководство будет сосредоточено на создании двух разных представлений для страницы. Сначала у нас будет форма авторизации, которая будет отображаться при отсутствии cookie. Используя стандартные значения demo/demo, вы можете авторизоваться при помощи формы, и она сохранит вашу сессию в cookie.Очевидно, если подключить скрипт к базе данных, у вас будет возможность обслуживать большое число логинов. Это значит, что при помощи единственного скрипта вы сможете авторизовать множество людей, и при этом хранить их логины или ID в локальных cookie. Данный пример представляет лишь стартовую точку, где нам не нужны Ajax-запросы или скрипты на стороне сервера для авторизации пользователей.

Содержимое внутреннего элемента

Первый div – это оболочка, в которой содержится вся страница. Здесь предусмотрена форма с ID #loginform, которая отображается первой. Она будет скрыта посредством jQuery только в том случае, если посетитель на данный момент авторизован в демо-аккаунт с использованием cookie-сессии.

Basic Cookie Management

    
Login to the demo account with the following username/password: demo/demo


      Username:


      Password:







      
You are logged in as demo! The cookie is set to expire in 1 day from the original login.

      
Want to logout? Easy!

      
Logout Now

Вы наверное заметили, что в HTML после формы авторизации есть еще один div с id #logindetails. Ее мы скрыли при помощи CSS-стилей, так как нам нужно, чтобы она отображалась пользователю только в том случае, если он авторизован. Внутренний HTML-код статичен, и всегда отображает имя пользователя demo. Но при работе с базой данных, вы можете обновлять этот параметр на любое имя пользователя посредством javascript.

CSS-стили не так уж и запутаны, но было бы неплохо вдаться в некоторые подробности. Мы создали глянцевую CSS3-кнопку, воспользовавшись советами из руководства Codepen. Эти стили довольно развернутые, и их следует сохранить для повторного использования и в других проектах.

/** form elements **/
form label { font-size: 1.1em; line-height: 1.25em; font-weight: bold; margin-bottom: 5px; }

form input.basic {
  display: block;
  outline: none;
  font-size: 1.5em;
  color: #525252;
  width: 300px;
  padding: 10px 8px 10px 8px;
  margin-bottom: 7px;
  border: 1px solid #888;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}

#logindetails {
  display: none;
}

Мы также изменили стандартные элементы ввода таким образом, чтобы они лучше сочетались со страницей. Контейнер с деталями логина обозначен свойством display: none, так что он не займет места на сгенерированной странице. Тем не менее, он по прежнему составляет активную часть DOM, и это значит, что мы можем управлять значением display при помощи jQuery. Теперь давайте взглянем в данный jQuery-код, расположенный на дне страницы, сразу перед закрывающим тегом body.

Cookies в jQuery

Плагин предлагает нам несколько стандартных функций, которым может потребоваться гораздо больше логики в обычном javascript. Здесь представлены заранее подготовленные внутренние методы для вызова новых cookie и удаления существующих. Давайте взглянем на открывающий блок кода, чтобы понять, что здесь происходит:

$(function(){
  if($.cookie('username')) {
    $('#loginform').hide();
    $('#logindetails').show();
  }

Несомненно, бывают и более хорошие способы управления этой формой при помощи языков внутренних интерфейсов, но в нашем демо и jQuery отлично справляется. Запуская выражение if напротив $.cookie(‘username’), мы проверяем, существует ли cookie “username”. Если да, то нам известно, что пользователь на данный момент авторизован в свой аккаунт, поэтому мы скрываем форму авторизации и показываем информацию о логине. В противном случае ничего не происходит, и мы просто наблюдаем страницу с формой авторизации.

$('#loginform').submit(function(e){
    e.preventDefault();
    var inputuname = $('#username').val();
    var inputpass  = $('#password').val();

    if(inputuname == "demo" && inputpass == "demo") {
      // successful validation and create cookie
      $.cookie('username', 'demo', { expires: 1 });
      var currentusr = $.cookie('username');
      window.location.reload();
    }
  });

  $('#logoutbtn').on('click', function(e){
    e.preventDefault();
    if($.removeCookie('username')) {
      $('#logoutcontainer').html('Successfully logged out! Refreshing the page now...');
      window.setTimeout('location.reload()', 2000); // refresh after 2 sec
    }
  });
});

Мы скомбинировали эти две функции в единый блок кода, так как они очень похожи между собой. Как только пользователь делает попытку авторизоваться в аккаунт, мы проверяем, совпадает ли username/password с “demo”. Если да, то мы запускаем $.cookie(‘username’, ‘demo’, { expires: 1 });, куда включено несколько опций.Сначала мы назначаем имя cookie “username”, по которому мы сможем проверять значение. Строка “demo” – это значение cookie, но важно помнить, что мы можем ввести любое имя пользователя или даже id, если в ином случае этот метод будет подходить больше. Наконец, последний параметр – это коллекция опций, которая устанавливает количество дней до истечения действия cookie. Если мы опустим опцию истечения, тогда cookie будут удаляться сразу же, как только пользователь закрывает браузер. Это также упоминается в сессии cookie, и ниже мы привели простой пример, прокомментированный внизу скрипта.Второй блок кода отслеживает клики пользователя по ссылке #logoutbtn. Очевидно, что ссылка на выход будет отображаться только в том случае, если пользователь на данный момент авторизован. Эта функция будет терминировать сессию, запуская $.removeCookie(‘username’) внутри выражения if. Так что, если мы можем удалить cookie, то затем нам нужно убрать кнопку выхода и показать сообщение об успешном совершении действия, и представить форму авторизации.

В завершение

Cookies очень удобны для хранения информации как об авторизации, так для других целей. Вы можете организовать интернет-магазин, работающий на сессиях во внутреннем интерфейсе при помощи уникальных id cookie. Интернет-магазины сегодня очень популярны, и развитие в сфере веб-разработки позволяет гораздо проще их организовать и поддерживать. Вы можете скачать пример кода, и проверить, каким образом вы можете использовать данный пример в собственных проектах, а также попробовать усовершенствовать функционал.

Исходники в архиве.