Топ плагинов jQuery. Плагин jQuery Cookie

Топ плагинов jQuery. Плагин jQuery Cookie

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня мы познакомимся с практически незаменимым плагином для большинства сайтов. Речь идет о плагине jQuery Cookie. Как вы уже догадались из названия, задача плагина — работа с куками.

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

Еще один классический пример — запоминание авторизации пользователя. Пользователь авторизуется на сайте, выбрав опцию Запомнить. При обращении к сайту на следующий день ему уже не нужно тратить время на авторизацию, пользовательская сессия будет восстановлена автоматически.

Все эти чудеса возможны благодаря кукам. Куки — это некоторый набор данных, который хранится на компьютере пользователя и доступен для JavaScript. Также браузер отправляет конкретные куки сайта при запросе сервера.

Для удобной работы с куками мы можем воспользоваться специальным плагином jQuery Cookie, работа с которым очень проста. Скачаем и подключим единственный файл плагина:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
<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, то там мы увидим примерно такую картину:

Топ плагинов jQuery. Плагин jQuery Cookie

Кука успешно создана и даже если мы закомментируем теперь строку кода, создающую ее, и обновим страницу — кука никуда не денется. Она доступна нам в течение пользовательской сессии, т.е. до закрытия браузера. Если нам нужно создать куку на более длительный срок, тогда мы можем указать его третьим параметром:

$.cookie('name2', 'John', {expires: 3});

Таким способом мы создали куку, продолжительность жизни которой 3 дня.

Топ плагинов jQuery. Плагин jQuery Cookie

Хорошо, теперь давайте попробуем прочитать куку. Сделать это поможет все тот же метод cookie() только с первым параметром.

console.log( 'Это кука name: ' + $.cookie('name') );
console.log( 'Это кука name2: ' + $.cookie('name2') );

Топ плагинов jQuery. Плагин jQuery Cookie

Ну и, наконец, метод removeCookie, который может удалить ненужную более куку.

$.removeCookie('name');

Если теперь обновить страницу и заглянуть в раздел куки браузера, то удаленной куки мы там уже не увидим. Как видите, благодаря плагину работа с куками действительно проста и удобна.

На этом мы завершим данную статью. В следующей статье мы узнаем о еще одном способе хранения пользовательских данных, который можно выбрать в том случае, если вам не принципиально использование кук. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree