От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня мы познакомимся с практически незаменимым плагином для большинства сайтов. Речь идет о плагине jQuery Cookie. Как вы уже догадались из названия, задача плагина — работа с куками.
Задача хранения пользовательских настроек и работы с ними встает перед нами в любом мало-мальски серьезном проекте. Например, классическая задача представления товаров в интернет-магазине в виде списка или в табличном виде. Пользователь волен выбрать наиболее удобный для него способ представления, ну а мы должны запомнить его и не забыть показать в удобном виде как в пределах текущего сеанса, так и при следующем обращении к сайту.
Еще один классический пример — запоминание авторизации пользователя. Пользователь авторизуется на сайте, выбрав опцию Запомнить. При обращении к сайту на следующий день ему уже не нужно тратить время на авторизацию, пользовательская сессия будет восстановлена автоматически.
Все эти чудеса возможны благодаря кукам. Куки — это некоторый набор данных, который хранится на компьютере пользователя и доступен для JavaScript. Также браузер отправляет конкретные куки сайта при запросе сервера.
Для удобной работы с куками мы можем воспользоваться специальным плагином jQuery Cookie, работа с которым очень проста. Скачаем и подключим единственный файл плагина:
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js»></script>
<script src=»js/jquery.cookie.js»></script>
После этого нам доступна пара полезных методов: cookie() и removeCookie(). Первый метод позволяет устанавливать куки, второй — удалять их. Давайте рассмотрим примеры, они предельно просты. Важное замечание! Работу с данным кодом желательно производить на сервере.
Итак, для того, чтобы установить куку, нам достаточно вызвать метод cookie(), передав ему пару параметров. Первый параметр определяет имя создаваемой куки, второй параметр — ее значение:
$.cookie(‘name’,’Andrey’);
Если теперь открыть консоль браузера и заглянуть в раздел Cookies, то там мы увидим примерно такую картину:
Кука успешно создана и даже если мы закомментируем теперь строку кода, создающую ее, и обновим страницу — кука никуда не денется. Она доступна нам в течение пользовательской сессии, т.е. до закрытия браузера. Если нам нужно создать куку на более длительный срок, тогда мы можем указать его третьим параметром:
$.cookie(‘name2′,’John’,{expires:3});
Таким способом мы создали куку, продолжительность жизни которой 3 дня.
Хорошо, теперь давайте попробуем прочитать куку. Сделать это поможет все тот же метод cookie() только с первым параметром.
console.log(‘Это кука name: ‘+$.cookie(‘name’));
console.log(‘Это кука name2: ‘+$.cookie(‘name2’));
Ну и, наконец, метод removeCookie, который может удалить ненужную более куку.
Если теперь обновить страницу и заглянуть в раздел куки браузера, то удаленной куки мы там уже не увидим. Как видите, благодаря плагину работа с куками действительно проста и удобна.
На этом мы завершим данную статью. В следующей статье мы узнаем о еще одном способе хранения пользовательских данных, который можно выбрать в том случае, если вам не принципиально использование кук. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
