jQuery Cookies. Работа с куками на jQuery

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

И задача этой статьи, научить вас работать с данным плагином.

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

Для начала скачайте плагин jQuery Cookie (он лежит в дополнительных материалах).

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

<script type="text/javascript" src="http://yoursite.ru/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://yoursite.ru/js/jquery.cookie.js"></script>

Установка cookie

Если на предыдущем шаге вы правильно подключили jquery.cookie.js, то теперь можете легко устанавливать новые куки. Для этого пропишите следующий код:

$.cookie('cookie_name', 'cookie_value');

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

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

$.cookie('cookie_name', 'cookie_value', {
    expires: 5
});

В этом случае создастся кука, которая будут храниться в браузере 5 дней и затем она будет автоматически удалена.

Оба приведенных выше примера будут устанавливать куки для путей текущего уровня, т.е. если запрашиваемая страница имеет адрес http://yoursite.ru/page.html, то кука будет установлена для пути / и поэтому будет доступна на всех страницах текущего домена. Если же страница имеет адрес http://yoursite.ru/subpath/page.html, то кука будет установлена для пути /subpath и уже не будет доступна в /.

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

$.cookie('cookie_name', 'cookie_value', {
    expires: 5,
    path: '/',
});

Если же хотите установить куку для определенной части сайта, то укажите ее путь:

$.cookie('cookie_name', 'cookie_value', {
    expires: 5,
    path: '/admin',
});

Также при установки cookie, мы можем задавать и другие, менее важные, параметры:

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

$.cookie('cookie_name', 'cookie_value', {
    domain: 'subdomain.yoursite.ru'
});

secure – если установить данный параметр в значение true, то установленные куки будут защищенными и они отсылаются на сервер только по протоколу https. На практике данный параметр редко применяется, поэтому значение по умолчанию у него false.

Пример установки куки со всеми параметрами, вы можете посмотреть ниже:

$.cookie('cookie_name', 'cookie_value', {
    expires: 5,
    path: '/',
    domain: 'subdomain.yoursite.ru',
    secure: true
});

Получение cookie

Получать значение куки очень легко:

var test = $.cookie('cookie_name');

Теперь значение куки cookie_name будет присвоено переменной test.

Удаление cookie

Чтобы удалить куку для этого установите ей значение null.

$.cookie('cookie_name', null);

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

P.S. Советую вам также почитать статью, про LocalStorage и SessionStorage. Ведь они в некоторых случаях могут заменить cookie и для их работы не нужно подключать сторонних плагинов.

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

  • Сделала проверку, куккис preload показывает что есть, но видео все равно загружается:
    $(window).on('load', function () {
    $.cookie('preload', '1', {
    path: '/'
    });
    // $.cookie('preload', null, { expires: -1 });
    if($.cookie('preload')==null){
    var $preloader = $('#page-preloader'),
    $spinner = $preloader.find('.spinner'),
    $video = $('video');

    $video.get(0).play();

    $video.bind('ended', function () {
    //—$spinner.fadeOut();
    //—or maybe
    $preloader.fadeOut();
    });
    }
    });

  • 21.04.2015 07:38

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

  • Добрый день, как можно адаптировать jquery.cookie.js для работы с библиотекой jquery версии 1.11.0 ? спасибо