Cookie — это небольшие текстовые файлы, которые веб-сайты используют для хранения информации на компьютере пользователя. JavaScript позволяет работать с cookie с помощью объекта document.cookie.
Чтобы установить cookie в JavaScript, нужно задать значение для document.cookie в следующем формате:
document.cookie = "имя_cookie=значение; expires=дата; path=путь; domain=домен; secure";имя_cookie — имя cookie.значение — значение cookie.expires (необязательно) — дата истечения срока действия cookie.path (необязательно) — путь, для которого cookie действительно.domain (необязательно) — домен, для которого cookie действительно.secure (необязательно) — указывает, что cookie должен быть отправлен только по защищенному соединению HTTPS.Например, чтобы установить cookie с именем "username" и значением "JohnDoe", который действует на всем домене, можно использовать следующий код:
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 2026 00:00:00 UTC; path=/;";Чтобы получить значение cookie в JavaScript, можно использовать следующий код:
let cookieValue = document.cookie
.split('; ')
.find(row => row.startsWith('имя_cookie='))
.split('=')[1];
имя_cookie — имя cookie, значение которого нужно получить.Например, чтобы получить значение cookie с именем "username", можно использовать следующий код:
let cookieValue = document.cookie
.split('; ')
.find(row => row.startsWith('username='))
.split('=')[1];
console.log(cookieValue); // выводит значение "JohnDoe"
Чтобы удалить cookie в JavaScript, нужно установить дату истечения срока действия на прошедшую дату:
document.cookie = "имя_cookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";имя_cookie — имя cookie, которое нужно удалить.Например, чтобы удалить cookie с именем "username", можно использовать следующий код:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";Рассмотрим пример использования cookie для запоминания имени пользователя на сайте.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Пример использования cookie</title>
</head>
<body>
<label for="username">Введите имя пользователя:</label>
<input type="text" id="username">
<button id="submit">Отправить</button>
<script>
// проверяем, есть ли cookie с именем "username"
let username = getCookie("username");
if (username) {
// если cookie есть, заполняем поле ввода и приветствуем пользователя
document.getElementById("username").value = username;
alert("Добро пожаловать, " + username + "!");
}
// обрабатываем отправку формы
document.getElementById("submit").addEventListener("click", function() {
// получаем значение поля ввода
let username = document.getElementById("username").value;
// устанавливаем cookie с именем "username" и значением из поля ввода
setCookie("username", username, 365);
// приветствуем пользователя
alert("Добро пожаловать, " + username + "!");
});
// функция для получения значения cookie по имени
function getCookie(name) {
let cookieValue = document.cookie
.split('; ')
.find(row => row.startsWith(name + '='))
.split('=')[1];
return cookieValue ? decodeURIComponent(cookieValue) : null;
}
// функция для установки cookie с именем, значением и сроком действия
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
}
</script>
</body>
</html>Этот пример показывает, как использовать cookie для запоминания имени пользователя на сайте. При первом посещении пользователя он может ввести свое имя в поле ввода и отправить форму. Затем его имя сохранится в cookie, и в следующий раз, когда он посетит сайт, ему не нужно будет вводить имя снова.
Коментарии отсутствуют, будьте первым(ой) кто напишет под этим постом!
Написать коментарий