Как читать cookies в JavaScript: простой и кроссбраузерный способ

Функция getCookie(name) — это простой и эффективный способ получения cookies. Если вы передадите ей название cookie, она вернет его значение. Если cookie не существует, функция вернет undefined. Этот метод удобен для извлечения данных из строки document.cookie с помощью регулярных выражений.

Вот пример функции getCookie, которая находит и возвращает значение cookie по его имени. Если cookie не существует, функция вернет undefined:

function getCookie(name) {
  let match = document.cookie.match(`(?:^|; )${name}=([^;]*)`);
  return match ? decodeURIComponent(match[1]) : undefined;
}

Регулярные выражения позволяют мгновенно найти нужное cookie, а циклы работают медленнее. Если рассмотреть на примере из жизни, тогда в данном случае регулярное выражение — это лифт, на котором вы сразу подниметесь на нужный этаж, а цикл — лестница, по которой вы также можете подняться, но сделаете это за больший промежуток времени. Регулярное выражение сразу нацеливается на нужное значение в строке, тогда как цикл проходит через все элементы один за другим. Таким образом, метод использования регулярных выражений избавляет от необходимости перебирать все значения, позволяя сразу извлечь нужную информацию из document.cookie.

Соответствие интернет-стандартам

Эта функция соответствует стандарту RFC 2109, что гарантирует совместимость с разными настройками cookies и правильное кодирование символов, благодаря чему она эффективно работает с cookies.

Кеширование

Для повышения эффективности при частых вызовах функции можно кешировать значения в объекте. Это значительно сократит время доступа к данным.

Вот пример кода, который кеширует значения cookies в объекте для повышения производительности при многократных вызовах функции:

const cookieCache = {};

function getCookieCached(name) {
  // Если значение уже закешировано, возвращаем его
  if (cookieCache[name]) {
    return cookieCache[name];
  }

  // Иначе ищем значение и кешируем его
  let match = document.cookie.match(`(?:^|; )${name}=([^;]*)`);
  const cookieValue = match ? decodeURIComponent(match[1]) : undefined;
  
  if (cookieValue) {
    cookieCache[name] = cookieValue; // Кешируем значение
  }

  return cookieValue;
}

Повышение производительности

Сделайте getCookie глобальной функцией, чтобы избежать лишней интерпретации кода, которая может снижать производительность.