Работа с cookies на jQuery

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

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

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

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

<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

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

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

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

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

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

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

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

А если хотим установить куку для страницы “/mypage”:

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

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

Получение cookies

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

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

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

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

Так же имеется возможность прочитать сразу все установленные куки:

$.cookie();

в результате будет возвращен ассоциативный массив { “name”: “value” }

Удаление cookies

$.removeCookie('name');