css.in.ua
Підтримати

JS властивість Document.cookie

Загальний опис

Властивість cookie об'єкта Document в JavaScript відіграє життєво важливу роль у керуванні cookies веб-сторінки. Cookies — це невеликі фрагменти даних, які веб-сайти зберігають на комп'ютері користувача, щоб зберегти інформацію про його сеанс, переваги або інші дані, які сайт може використовувати під час перегляду. Властивість cookie дозволяє веб-розробникам отримувати доступ до цих даних та модифікувати їх, що є надзвичайно корисним для реалізації функцій, таких як аутентифікація користувачів, збереження налаштувань користувача та відстеження статусу сеансу користувача.

На базовому рівні, властивість cookie може бути використана для читання та запису cookies. Для читання всіх доступних cookies на сторінці, просто використайте document.cookie. Це поверне рядок, що містить всі cookies, встановлені для даної веб-сторінки, у форматі name=value, розділені крапкою з комою. Для додавання або оновлення cookie, ви просто призначаєте рядок до document.cookie з іменем cookie, значенням та, за необхідності, атрибутами, такими як expires, path, domain, secure, та SameSite.

Створення Cookie

Для створення нового cookie, ви могли б використовувати код подібний до наступного:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

Цей код створює cookie з іменем username, значенням John Doe, датою закінчення 18 грудня 2023 року і шляхом /, що означає, що cookie доступний для всієї веб-сторінки.

Читання Cookies

Читання cookies вимагає деякого парсингу, оскільки document.cookie повертає всі cookies як один рядок. Ви могли б ітерувати через цей рядок, використовуючи метод split(), щоб отримати конкретне значення cookie:

let cookies = document.cookie.split('; ');
for(let i = 0; i < cookies.length; i++) {
    let parts = cookies[i].split('=');
    if(parts[0] === 'username') {
        console.log('Username:', parts[1]);
        break;
    }
}

Видалення Cookies

Для видалення cookie, встановіть його атрибут expires на минулу дату:

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

Це "видаляє" cookie, встановлюючи його термін дії на минулу дату, що змушує браузер автоматично видалити його.

Безпека та обмеження

При роботі з cookies, важливо враховувати питання безпеки та конфіденційності. Використання атрибутів secure та SameSite може допомогти захистити ваші cookies від міжсайтових атак і перехоплення. Також, варто пам'ятати, що користувачі можуть вимкнути cookies у своєму браузері, тому не варто повністю покладатися на них для критично важливих функцій веб-сайту.

У резюме, document.cookie є потужним інструментом для керування cookies в JavaScript, який може значно покращити користувацький досвід на вашому сайті. Від створення простих налаштувань і відстеження сеансів до реалізації складних механізмів аутентифікації, вміння ефективно працювати з cookies є незамінним навиком для сучасного веб-розробника.

Порада:

Завжди вказуйте атрибут path при встановленні кукі за допомогою document.cookie, щоб контролювати, на якій частині сайту ці кукі будуть доступні. Наприклад, встановлення кукі тільки для кореневого шляху сайту можна здійснити так: document.cookie = "username=John Doe; path=/";. Це дозволить уникнути небажаного доступу до кукі на інших сторінках.
Порада:

Для забезпечення безпеки даних користувачів, завжди використовуйте атрибут Secure та HttpOnly при встановленні кукі, щоб вони передавалися тільки через HTTPS-з'єднання і не були доступні через JavaScript відповідно. Це може допомогти захистити дані від міжсайтового скриптингу (XSS) і людини посередника (MITM) атак. Наприклад: document.cookie = "user=Jane Doe; Secure; HttpOnly".
Порада:

Враховуйте, що при кожному зверненні до властивості document.cookie для читання, ви отримуєте рядок, що містить усі кукі, встановлені для поточної сторінки, розділені крапкою з комою. Тому, для ефективної роботи з кукі, може знадобитися написання допоміжних функцій для парсингу цього рядка і отримання значення конкретного кукі. Наприклад, функція для отримання значення кукі може виглядати так:

function getCookie(name) {
	 let matches = document.cookie.match(new RegExp(
		 "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
	 ));
	 return matches ? decodeURIComponent(matches[1]) : undefined;
}

Синтаксис

Document.cookie

Значення

Return

Переглядачі

Переглядач

1

1

1

3

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі користувач може ввести ім'я та значення cookie, а потім зберегти його за допомогою кнопки "Зберегти cookie". Після цього він може витягти значення цього cookie за допомогою кнопки "Отримати значення cookie". Результат виводиться нижче кнопок.

У цьому коді ми спочатку створюємо cookie з ім'ям "username" і значенням "Taras", вказуючи дату закінчення дії та шлях. Потім ми читаємо всі доступні cookie, розділяємо їх за допомогою ; і шукаємо cookie з ім'ям "username", щоб вивести привітання для користувача. Цей приклад ілюструє базове використання cookie для зберігання та доступу до даних користувача.

// Запис cookie
document.cookie = "username=Taras; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

// Читання cookie
var cookies = document.cookie.split('; ');
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].split('=');
    if (cookie[0] === 'username') {
        console.log('Привіт, ' + cookie[1]);
    }
}

У цьому коді функція manageCookie приймає чотири параметри: дію (set, get, delete), ім'я cookie, значення cookie (для додавання або оновлення) та кількість днів до закінчення дії (тільки для додавання). Це дозволяє легко встановлювати, отримувати та видаляти cookie без необхідності кожного разу писати повторюваний код для маніпуляцій з cookie.

function manageCookie(option, name, value, days) {
    if (option === 'set') {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    } else if (option === 'get') {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    } else if (option === 'delete') {
        document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }
}

// Використання функції
manageCookie('set', 'userPreferences', 'darkMode', 7); // Встановлення cookie
var userPref = manageCookie('get', 'userPreferences'); // Отримання cookie
console.log('Настройки користувача:', userPref);
manageCookie('delete', 'userPreferences'); // Видалення cookie

Спільнота

Зв'язок