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

Файлы cookie — это крошечные кусочки информации, которые веб-сайты сохраняют в вашем браузере. Они играют решающую роль в веб-разработке, позволяя веб-сайтам запоминать ваши предпочтения и предоставлять персонализированный опыт. Но задумывались ли вы когда-нибудь, как получить доступ к этим файлам cookie и просмотреть их в консоли? В этой статье мы рассмотрим несколько изящных консольных методов и фрагментов кода, которые помогут вам найти эти аппетитные файлы cookie!

Метод 1: document.cookie
Самый простой способ просмотреть файлы cookie — зарегистрировать свойство document.cookie в консоли. Он возвращает строку, содержащую все файлы cookie, связанные с текущим документом.

console.log(document.cookie);

Метод 2: использование document.cookie.split(‘;’)
Иногда вам может потребоваться извлечь отдельные файлы cookie из строки document.cookie. Один из способов сделать это — разделить строку, используя точку с запятой (;) в качестве разделителя. При этом будет создан массив, каждый элемент которого представляет отдельный файл cookie.

const cookiesArray = document.cookie.split(';');
console.log(cookiesArray);

Метод 3: доступ к определенным файлам cookie
Если вас интересует конкретный файл cookie, вы можете перебрать массив cookieArray и снова извлечь нужный файл cookie с помощью метода Split(). На этот раз мы разделим элемент cookie, используя знак равенства (=) в качестве разделителя имени и значения.

const cookiesArray = document.cookie.split(';');
cookiesArray.forEach(cookie => {
  const [name, value] = cookie.trim().split('=');
  console.log(`Cookie Name: ${name}, Value: ${value}`);
});

Метод 4: использование document.cookie с decodeURIComponent()
Файлы cookie часто кодируются для обработки специальных символов. Чтобы декодировать значения cookie, вы можете использовать функцию decodeURIComponent(). Это особенно полезно при работе с файлами cookie, содержащими сложные данные, например объекты JSON.

const cookiesArray = document.cookie.split(';');
cookiesArray.forEach(cookie => {
  const [name, encodedValue] = cookie.trim().split('=');
  const value = decodeURIComponent(encodedValue);
  console.log(`Cookie Name: ${name}, Decoded Value: ${value}`);
});

Метод 5: Document.cookie как объект
Чтобы сделать работу с файлами cookie более удобной, вы можете создать объект JavaScript с парами ключ-значение, представляющими каждый файл cookie. Это поможет вам легко манипулировать файлами cookie и получать к ним структурированный доступ.

const cookiesObject = {};
document.cookie.split(';').forEach(cookie => {
  const [name, value] = cookie.trim().split('=');
  cookiesObject[name] = decodeURIComponent(value);
});
console.log(cookiesObject);

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

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

Так что вперед, раскройте возможности консоли и начните исследование файлов cookie!