Как записать и прочитать Cookie на JavaScript

Как известно, Cookie (кукис) - это переменные, сохраняемые на компьютере пользователя браузером для последующего использования. Получить и установить значения cookie можно как и в программе на сервере, так и в программе клиента, т.к. браузер обменивается ими с сервером каждый раз при получении страницы сайта. Для сохранения и чтения cookie в JavaScript можно использовать несколько вариантов, приведу два из них.

Вариант 1. Запись и чтение Cookie на чистом JavaScript

Записать кукис со сроком жизни 30 дней:

writeCookie('test_var', 'test_value', 30);

function writeCookie(name, val, expires) {
  var date = new Date;
  date.setDate(date.getDate() + expires);
  document.cookie = name+"="+val+"; path=/; expires=" + date.toUTCString();
}

Прочитать кукис:

test = readCookie('test_var');

function readCookie(name) {
  var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

Приведенные функции записывают и читают cookie переменные текущего сайта, на котором выполняется javascript-код. Если читаемая cookie-переменная не существует, будет возвращена пустая строка.

Вариант 2. Запись и чтение Cookie с помощью jQuery

Для работы с cookie для jQuery существует небольшой плагин, который так и называется jquery-cookie.

Скачать можно с GitHub или с нашего сайта.

Подключить плагин к странице можно, например, так:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

Записать кукис с помощью jQuery теперь можно так:

// бессрочно
$.cookie('test_var', 'test_value');
// со сроком жизни 30 дней
$.cookie('test_var', 'test_value', { expires: 30 });

Прочитать кукис с помощью jQuery можно так:

$.cookie('test_var');

Если при чтении запрошенная cookie-переменная не существует, будет возвращено undefined

Полагаю, приведенных примеров будет достаточно для работы с Cookie в JavaScript.