Получить cookie по имени

Один из подходов, который позволяет избежать итерации по массиву, выглядит следующим образом:

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

Разбор

Разделение строки по токену приведет либо к массиву с одной строкой (та же самая строка), если токен отсутствует в строке, либо к массиву из двух строк, если токен найден.

Первая (левая) часть является строкой того, что было перед токеном, а вторая (правой) — строкой того, что было после токена.

Примечание: если строка начинается с токена, первая часть будет пустой строкой.

Учитывая, что куки хранятся в следующем формате:

"{name}={value}; {name}={value}; ..."

Для того чтобы извлечь значение конкретного куки, нам нужно получить строку, которая идет после "; =" и до следующего ";". Прежде чем мы начнем, мы добавляем к строке куки "; ", чтобы каждая кука (включая первую) была окружена "; " и "=":

"; {name}={value}; {name}={value}; ..."

Теперь мы можем сначала разделить строку по "; =", и если токен найден в строке куки (т.е. у нас есть два элемента), то второй элемент будет строкой, начинающейся с нашего значения куки. Затем мы извлекаем это значение из массива (т.е. используем pop), и повторяем тот же процесс, но теперь с токеном ";", извлекая левую часть строки (т.е. с помощью shift) для получения фактического значения токена.

Для получения значения cookie можно использовать одно регулярное выражение. Например, вы можете воспользоваться следующим кодом:

window.getCookie = function(name) {
  var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
}

Этот подход работает, но также можно использовать более современный вариант с использованием стрелочной функции:

function getCookieValue(name) {
  const regex = new RegExp(`(^| )${name}=([^;]+)`);
  const match = document.cookie.match(regex);
  if (match) {
    return match[2];
  }
}

Оба метода используют регулярное выражение для поиска cookie по имени и извлекают его значение, если оно найдено. Этот код был улучшен благодаря комментариям от Scott Jungwirth. Выбор между этими вариантами в основном зависит от ваших предпочтений и стиля кода в проекте.

Если вы используете jQuery, я рекомендую воспользоваться следующим плагином:

https://github.com/carhartl/jquery-cookie

https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

Подключите его через CDN:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Чтобы прочитать значение куки, используйте такой код:

var value = $.cookie("obligations");

Также вы можете записать куки следующим образом:

$.cookie('obligations', 'new_value');
$.cookie('obligations', 'new_value', { expires: 14, path: '/' });

Чтобы удалить куки, используйте:

$.removeCookie('obligations');

Этот плагин значительно упрощает работу с куками в jQuery.

Для преобразования cookie в объект JavaScript или в карту (Map) можно использовать следующие однострочные решения:

Чтобы конвертировать cookie в объект, используйте:

Object.fromEntries(document.cookie.split('; ').map(v => v.split(/=(.*)/s).map(decodeURIComponent)))

А если вам нужна карта (Map), воспользуйтесь следующим кодом:

new Map(document.cookie.split('; ').map(v => v.split(/=(.*)/s).map(decodeURIComponent)))

В этих примерах строка document.cookie разбивается на отдельные cookie, а затем каждая cookie декодируется с помощью decodeURIComponent, чтобы получить правильные значения.

Вы можете использовать библиотеку js-cookie для работы с cookie в JavaScript.

Сначала подключите библиотеку в ваш HTML-документ:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

Чтобы создать cookie, используйте следующий код:

Cookies.set('name', 'value');

Для чтения значения cookie можно воспользоваться следующим кодом:

Cookies.get('name'); // => 'value'

Эта библиотека делает работу с cookies простой и удобной!