Использование куки из jQuery

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

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

Cookie существуют как в PHP, так и в jQuery. Поэтому рассмотрим каждый случай более подробно.

Подробная инструкция по работе с Cookie на jQuery

1. Установка Cookie

Теперь мы можем попробовать создать наш первый куки:

$.cookie("cookie_name", "cookie_value", { expires: 3, path: "/", domain: "your_site.ru", secure: true });

Что здесь что?

«cookie_name » – имя куки;

«cookie_value » – значение куки;

«expires » – количество дней хранения куки (в нашем случае – 3 дня). По истечении этого времени произойдет автоматическое удаление куки;

«path » – доступность куки на сайте (в нашем случае «/ » - доступна на всем сайте). По желанию можно задать только определенную страницу или раздел, где будет доступен куки, например, «/audio/rock »;

«domain » – домен, на котором куки действителен. Если у вас есть поддомен, то можете указать его в этом параметре, например, «domain: "subdomain.your_site.ru" », и в таком случае куки будет доступен только на домене «subdomain.your_site.ru »;

«secure » – параметр, указывающий, что куку нужно передавать по защищенному протоколу https.

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

$.cookie("cookie_name", "cookie_value", { expires: 3, path: "/" });

2. Получение Cookie

Получить куки довольно просто, сделать это можно с помощью кода:

$.cookie("cookie_name");

Данный код можно присвоить к переменной и использовать в своих нуждах:

var content = $.cookie("cookie_name"); if(content != null) { alert("Куки существует!"); } else { alert("Куки нет!"); }

Согласитесь, это весьма удобно.

3. Удаление Cookie

Чтобы удалить значение куки, присвойте ему значение «null »:

$.cookie("cookie_name", null);

На этом, я думаю, знакомство с работой с Cookie на jQuery закончено. Этих знаний вполне хватит для реализации ваших идей.

Подробная инструкция по работе с Cookie на PHP

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

1. Установка Cookie

Для того чтобы установить в PHP куки, мы воспользуемся встроенной функцией «setcookie »:

Что здесь что?

«cookie_name » – имя куки;

«cookie_value » – значение куки;

«time()+3600 » – время жизни куки в секундах (в нашем случае – 1 час). Если задать время жизни равное «0 », то куки удалится сразу, как будет закрыт браузер;

«/ » – раздел, в котором доступен куки (в нашем случае – доступен на всем сайте). Если вы хотите ограничить раздел, в котором куки будет доступен, то «/ » замените, например, на «/audio/rock »;

«your_site.ru » – домен, на котором куки будет доступен;

«true » – параметр, указывающий что куки доступен только по защищенному протоколу https. В противном случае значение – false ;

«false » – параметр, указывающий, что куки доступен скриптовым языкам. В противном случае – true (доступно только по http).

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

Для удобства значение куки можно задать через переменную:

2. Получение Cookie

Для того чтобы получить куки, вам необходимо воспользоваться:

$_COOKIE["cookie_name"];

Чтобы исключить появление ошибок из-за возможного отсутствия куки, воспользуйтесь :

Как и в предыдущем примере работы с Cookie на jQuery, куки можно присвоить к переменной:

3. Удаление Cookie

Удаление куки на PHP выполняется так же просто, как и в jQuery. Все, что вам нужно сделать, это задать пустое значение куки и отрицательное время (время, которое уже прошло):

Setcookie ("cookie_name", "", time() - 3600);

Время в данном примере равняется часу назад, чего вполне хватит для удаления куки.

Хочется отметить , что в некоторых случаях использование куки куда рациональнее использования базы данных для реализации необходимого функционала.

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

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

Cookie существуют как в PHP, так и в jQuery. Поэтому рассмотрим каждый случай более подробно.

Подробная инструкция по работе с Cookie на jQuery

1. Установка Cookie

Теперь мы можем попробовать создать наш первый куки:

$.cookie("cookie_name", "cookie_value", { expires: 3, path: "/", domain: "your_site.ru", secure: true });

Что здесь что?

«cookie_name » – имя куки;

«cookie_value » – значение куки;

«expires » – количество дней хранения куки (в нашем случае – 3 дня). По истечении этого времени произойдет автоматическое удаление куки;

«path » – доступность куки на сайте (в нашем случае «/ » - доступна на всем сайте). По желанию можно задать только определенную страницу или раздел, где будет доступен куки, например, «/audio/rock »;

«domain » – домен, на котором куки действителен. Если у вас есть поддомен, то можете указать его в этом параметре, например, «domain: "subdomain.your_site.ru" », и в таком случае куки будет доступен только на домене «subdomain.your_site.ru »;

«secure » – параметр, указывающий, что куку нужно передавать по защищенному протоколу https.

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

$.cookie("cookie_name", "cookie_value", { expires: 3, path: "/" });

2. Получение Cookie

Получить куки довольно просто, сделать это можно с помощью кода:

$.cookie("cookie_name");

Данный код можно присвоить к переменной и использовать в своих нуждах:

var content = $.cookie("cookie_name"); if(content != null) { alert("Куки существует!"); } else { alert("Куки нет!"); }

Согласитесь, это весьма удобно.

3. Удаление Cookie

Чтобы удалить значение куки, присвойте ему значение «null »:

$.cookie("cookie_name", null);

На этом, я думаю, знакомство с работой с Cookie на jQuery закончено. Этих знаний вполне хватит для реализации ваших идей.

Подробная инструкция по работе с Cookie на PHP

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

1. Установка Cookie

Для того чтобы установить в PHP куки, мы воспользуемся встроенной функцией «setcookie »:

Что здесь что?

«cookie_name » – имя куки;

«cookie_value » – значение куки;

«time()+3600 » – время жизни куки в секундах (в нашем случае – 1 час). Если задать время жизни равное «0 », то куки удалится сразу, как будет закрыт браузер;

«/ » – раздел, в котором доступен куки (в нашем случае – доступен на всем сайте). Если вы хотите ограничить раздел, в котором куки будет доступен, то «/ » замените, например, на «/audio/rock »;

«your_site.ru » – домен, на котором куки будет доступен;

«true » – параметр, указывающий что куки доступен только по защищенному протоколу https. В противном случае значение – false ;

«false » – параметр, указывающий, что куки доступен скриптовым языкам. В противном случае – true (доступно только по http).

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

Для удобства значение куки можно задать через переменную:

2. Получение Cookie

Для того чтобы получить куки, вам необходимо воспользоваться:

$_COOKIE["cookie_name"];

Чтобы исключить появление ошибок из-за возможного отсутствия куки, воспользуйтесь проверкой его существования :

Как и в предыдущем примере работы с Cookie на jQuery, куки можно присвоить к переменной:

3. Удаление Cookie

Удаление куки на PHP выполняется так же просто, как и в jQuery. Все, что вам нужно сделать, это задать пустое значение куки и отрицательное время (время, которое уже прошло):

Setcookie ("cookie_name", "", time() - 3600);

Время в данном примере равняется часу назад, чего вполне хватит для удаления куки.

Хочется отметить , что в некоторых случаях использование куки куда рациональнее использования базы данных для реализации необходимого функционала.

На одном из форумов был вопрос как реализовать всплывающее окошко таким образом, чтобы, если посетитель окошко закрыл, то больше его не показывать. Решение пришло сразу — использовать куки, т.е. нужен был плагин, который «научил» бы jQuery работать с ними.

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

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

Проект находится на GitHub-e, но GitHub запрещает использовать прямые ссылки на файлы при подключении в страницу, поэтому файл плагина создадим вручную. Для этого создаем файл jquery.cookies.js, потом идем на страницу с кодом плагина — тырькс , выделяем его код (на момент написания статьи в коде плагина 114 строк) и копируем его в созданный ранее файл. Затем этот файл подключаем к странице нашего сайта (предположим что в корне сайта есть папка js в которую мы и положили наш файл) Заметьте, что библиотека jQuery, также обязательно должна быть подключена (в моем примере ниже она подключается с сайта google).

Таким способом создается новую куку (или изменяется значение существующей) с именем name и значением value . Но надо понимать, что данная кука будет храниться лишь до тех пор, пока пользователь не закроет браузер т.к. при установке мы не указали срок действия куки.

Если необходимо установить куку на определенный срок, например на 7 дней, то для этого используется специальный параметр expires :

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

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

Через 7 дней кука будет автоматически удалена. Максимальное время жизни куки можно установить равным 365 дням.

Параметр path позволяет указать страницы для которых установлена кука. Для примером выше, кука установится только для страниц, на которых она была установлена и не будет видна на других страницах сайта. Для того, чтобы кука была видна на всем сайте параметру path устанавливаем значение «/»

$.cookie("name", "value", { expires: 7, path: "/" });

Как видите установка куков очень проста.

Получение cookies

Получим установленную выше куку name:

$.cookie("name"); // => "value"

$ . cookie ("name" ) ; // => "value"

В случае, если кука не существует будет возращено undefined, например

if ($.cookie("nothing") == null) { alert("Кука не была установлена!"); }

jQuery Cookies - это плагин для работы с куками, который значительно облегчает данный процесс. Нам понадобиться подключенная библиотека Jquery и сам плагин Установка куки $.cookie("cookie_name", "cookie_value"); Таким не хитрым способом мы создали куку с именем cookie_name и значением cookie_value . Данная кука будет храниться лишь до тех пор, пока пользователь не закроет браузер, потому что при установке мы не указали срок действия куки.

Если вам необходимо установить куку на определенный срок, например на 1 день, нужно использовать специальный параметр expires :
expires: 1
}); Два этих примера будут устанавливать куку для путей текущего уровня. То есть если этот код сработал на странице http://mysite.ru/dir/ , то кука будет установлена для пути /dir и уже не будет доступна в корне сайта.

Для того чтобы использовать куку на всем сайте, необходимо использовать параметр path
$.cookie("cookie_name", "cookie_value", {
expires: 1,
path: "/",
}); При установки cookie, вы можете задавать и другие параметры.

domain – задает домен, на котором данная кука будет актуальна. По умолчанию, это домен той страницы, на которой кука была создана. В значении этого параметра, можно указать поддомен.

$.cookie("cookie_name", "cookie_value", {
domain: "one.mysite.ru"
}); secure – если true, то установленные куки будут защищенными и отсылаются на сервер только по протоколу https. Данный параметр редко применяется, поэтому значение по умолчанию - false.
$.cookie("cookie_name", "cookie_value", {
expires: 1,
path: "/",
secure: true
});

Как получить значение куки?Здесь все просто
var coo = $.cookie("cookie_name"); Удаление cookieЕсли вы устанавливали куки для всего сайта, то и удалять нужно для всего
$.cookie("cookie_name",null,{path: "/"});

Понравилась статья? Поделиться с друзьями: