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 є незамінним навиком для сучасного веб-розробника.

Синтаксис

Document.cookie

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Запис 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]);
    }
}

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