Что такое куки (cookies) и как их использовать в JavaScript

Куки (cookies) — это небольшие фрагменты данных, которые хранятся на компьютере пользователя и используются для передачи данных между браузером и сервером. Они позволяют веб-сайтам запоминать информацию о пользователе, такую как предпочтения, авторизация, состояние корзины для интернет-магазина и другие параметры. В этой статье мы рассмотрим, как использовать куки в JavaScript.

Создание и чтение кук в JavaScript

Для создания куки в JavaScript используется свойство document.cookie. Это свойство позволяет присваивать новые значения кукам или получать их текущие значения. Вот пример создания куки:

document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2021 12:00:00 UTC; path=/";

В данном случае мы создаем куки с именем username, значением JohnDoe, сроком действия до 18 декабря 2021 года и указываем, что куки будет доступно на всем сайте (параметр path).

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

function getCookie(name) {
  let cookieArr = document.cookie.split("; ");
  for(let i = 0; i < cookieArr.length; i++) {
    let cookiePair = cookieArr[i].split("=");
    if (name == cookiePair[0]) {
      return cookiePair[1];
    }
  }
  return null;
}

Теперь вы можете вызвать функцию getCookie("username"), чтобы получить значение куки username.

Удаление кук в JavaScript

Для удаления куки в JavaScript необходимо установить срок действия куки на прошедшую дату. Вот пример удаления куки username:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Работа с куками в библиотеке js-cookie

Ручное управление куками может быть немного громоздким, поэтому существует несколько библиотек, которые упрощают работу с куками. Одна из таких библиотек — js-cookie.

Для начала добавьте библиотеку на ваш сайт:

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

Теперь вы можете использовать простые функции для работы с куками:

// Создание куки
Cookies.set("username", "JohnDoe", { expires: 7, path: "/" });

// Чтение куки
let username = Cookies.get("username");

// Удаление куки
Cookies.remove("username", { path: "/" });

Теперь вы знаете, что такое куки и как их использовать в JavaScript. Этот инструмент может быть полезным для хранения пользовательских данных и состояния приложения. Но не забывайте о безопасности и приватности данных, не храните важную и чувствительную информацию в куках. 😉

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее