Работа с 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 дней, то для этого используется специальный параметр
$.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');