Куки (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. Этот инструмент может быть полезным для хранения пользовательских данных и состояния приложения. Но не забывайте о безопасности и приватности данных, не храните важную и чувствительную информацию в куках. 😉
Добавить комментарий