JavaScript: Сохраняем и читаем данные cookie

Разрабатывая веб приложения Вы скорее всего столкнетесь с необходимостью использовать cookie. Я расскажу Вам и приведу пример готовых функций для работы с куками в javascript.
Для тех кто не знает расскажу, что cookie это строковые данные, которые сохраняются у посетителя Вашего сайта. Вы можете обрабатывать эти данные и использовать их, например, для отображения или скрытия подсказок. Важно отметить, что Вы можете работать с куками только от Вашего сайта. В противном случае, возможность работать с данными всех сайтов привела бы к катастрофической бреши в безопасности. Каждая кука имеем свое время жизни, что избавляет нас от реализации логики времени хранения данных.
Для того чтобы создать cookie можно воспользоваться следующей функцией:

function setCookie(name, value, options) {
  options = options || {}; //по умолчанию нет параметров (допустимые: expires, domain, secure, path)
  var expires = options.expires;

  if (typeof expires == "number" && expires) { //если указано время жизни, и это число
    var d = new Date();
    d.setTime(d.getTime() + expires * 1000); //expires в секундах
    expires = options.expires = d;
  }
  if (expires && expires.toUTCString) {
    options.expires = expires.toUTCString();
  }

  value = encodeURIComponent(value); 
  var data = name + "=" + value; //строка в формате cookie имеет вид "имя_куки=значение"

  for (var propName in options) {   //дописываем параметры кук (domain, secure, path)
    data += "; " + propName;
    var propValue = options[propName];
    if (propValue !== true) {
      data += "=" + propValue;
    }
  }

  document.cookie = data; //сохраняем куку
}

Для получения значения cookie воспользуемся функцией:

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

Пример использования функций:

//создаем куку с именем welcome со значением 1, временем жизни 3 дня и доступной на всем сайте
setCookie('welcome', 1, { path: '/', expires: 3600*24*3 }); 
if(getCookie('welcome') == '1') {
    alert('Кука welcome равна еденице!');
}

P.S. Примеры функций взяты с сайта learn.javascript.ru. Это, пожалуй лучшая реализация без использования дополнительных плагинов.

Запись опубликована в рубрике JavaScript с метками , , , , , , , , , , . Добавьте в закладки постоянную ссылку.