Начни работать с cookies на jQuery за 5 минут

Буквально недавно мне написал мой знакомый, который попросил реализовать несколько интересных вещей которые не хватало на его сайте. Это были несколько очень простых но как он сказал важных вещей.

Первая это небольшое окошко, для пользователей, которые хотят выйти из его сайта. Такое окно должно выводиться лишь раз для того, чтобы предложить человеку какой-то интересный продукт, после его закрытия окошко больше не должно выскакивать.

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

Сайт был на WordPress, хотя сказать по правде это вообще не имеет никакого значения. Так как мы будем использовать плагин jQuery cookies. Это очень простой плагин, который немного упрощает те команды, которые есть в обычном JavaScript.

Подключение плагина jQuery Cookies на сайт

То о чем я бы хотел сегодня поведать называется jquery.cookies.js. У него есть один огромный минус, это необходимость подключения библиотеки jQuery, то есть, мы на сайте ее не используем, то подключить его лишь ради этой библиотеки нет смысла, но если все наоборот, то мы получаем очень крутой и простой инструмент.

Сам проект лежит на GitHub, вот на него ссылочка. Стоит учесть, что GitHub не разрешает свои скрипты встраивать в сайт, потому придется выкачать и поместить себе на хостинг.

Ну а после в Header (или Footer), подключаем вот эти два скрипта, один сам jQuery (если уже есть то не нужно подключать), а второй уже наш jquery.cookies, главное правильно путь прописать к нему.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://yoursite.ru/js/jquery.cookie.js"></script>

Как работают Cookies

Когда я начинал работать с Cookies, я точно не понимал принцип их работы, но это было очень давно, потому начну наверное с того, что расскажу, что могут cookie.

По факту, это своего рода переменные, которые могут сохраняться на компьютере даже после перезагрузки страницы. Второй важный момент, мы можем устанавливать время жизни Cookie.

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

Давайте рассмотрим, три важные вещи которые мы можем делать с cookie:

  • Установка;
  • Редактирование;
  • Просмотр;
  • Удаление.

Как использовать jQuery Cookies

Установка и редактирование Cookies

$.cookie('name', 'value');

Когда мы создаем новую куку, мы должны сделать две вещи. 

  1. Задать имя, с которым мы будем понимать, что эта кука хранит в себе конкретные данные, подобно переменной;
  2. Само значение которое может хранить лишь true либо целую строку. 

Но именно такая кука будет храниться лишь до тех пор, пока пользователь не закроет браузер, после закрытия и открытия вкладки вновь, мы начнем снова с начальной точки.

Чтобы задать время жизни cookie, переходим к следующему примеру:

$.cookie('name', 'value', { expires: 7 });

Как видим у функции появилось третье значение, в которой мы передаем данные в массиве. Там мы задаем новый параметр expires в который вписываем значение в днях. Максимальное время которое мы можем задать это 365 дней. Но все же если мы хотим задавать время не в днях а в минутах, то что делать? Ведь параметр expires как видим принимает целые значения которые воспринимаем за дни.

Вот мое решение:

let date = new Date();

date.setTime(date.getTime() + (30 * 1000)); // 30 секунд
date.setTime(date.getTime() + (60 * 1000)); // 60 секунд
date.setTime(date.getTime() + (15 * 60 * 1000)); // 15 минут
date.setTime(date.getTime() + (60 * 60 * 1000)); // 1 час

$.cookie('username', username, { expires: date });

Кроме того, мы можем задавать разные куки для разных страниц, для этого вводим новый параметр path, значением которого делам конкретную страницу, вот пример:

$.cookie('name', 'value', { expires: 14, path: '/custompage' });

Редактирование cookie просходит путем перезаписи данных, точно также как бы мы это делали если бы хотели дать переменной новое значение, то есть здесь мы делаем просто такую вещь: 

$.cookie('name', 'value', { expires: 7 }); // Значение name = value
$.cookie('name', true, { expires: 7 }); // Значение name = true

Вот и все. Дальше нужно просто получать данные и применять их при определенных условиях.

Получение значения cookies

Если мы хотим получить значение из нашей name из предыдущего примера, то нам нужно просто указать

$.cookie('name'); // => "true"

Вот именно здесь мы можем уже работать с куками при выполнении каких=то значений, вот самый простой пример:

if ( $.cookie('name') == true) {
&nbsp;&nbsp;alert("Кука была установлена!");
} else {
&nbsp;&nbsp;alert("Пусто!");
}

Есть конечно же возможность прочесть все куки сходу, хотя по правде понятия не имею зачем это, разве что с целью просто прочитать что имеется в общем списке, для этого вписываем:

$.cookie();

Удаление cookies

И получаем значения, я лично пользуют DevTools, потому значения смотрю там.

Но следующая наша цель является именно удаление, так как если она нам больше не нужна, к примеру мы нажали на кнопку “разлогиниться”, то логичным будет удалить все ненужные cookies.

$.removeCookie('name');

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


Было полезно? Не забудь поделиться записью в социальных сетях.

Метки: ,

Оставьте комментарий