document.cookie в JavaScript — читання й запис куків

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

Властивість 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=/";. Це дозволить уникнути небажаного доступу до кукі на інших сторінках.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.cookie

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	68	4	3	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	68	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<header>
  <h2 class="title">Document: cookie property</h2>
  <p class="description">Демонстрація запису та витягування значень з cookies.</p>
</header>
<main>
  <div class="result">
    <label for="cookieName">Ім'я cookie:</label>
    <input type="text" id="cookieName">
    <br>
    <label for="cookieValue">Значення cookie:</label>
    <input type="text" id="cookieValue">
    <br>
    <br>
    <button onclick="setCookie()">Зберегти cookie</button>
    <button onclick="getCookie()">Отримати значення cookie</button>
    <p id="cookieResult">Результат: </p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  cursor: pointer;
  padding: 5px 15px;
  font-size: 1rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #45a049;
}

function setCookie() {
  var name = document.getElementById("cookieName").value;
  var value = document.getElementById("cookieValue").value;

  // Встановлення cookie на 7 днів
  var date = new Date();
  date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
  var expires = "; expires=" + date.toUTCString();

  document.cookie = name + "=" + value + expires + "; path=/";
  document.getElementById("cookieResult").innerText = "Результат: Cookie '" + name + "' успішно збережено!";
}

function getCookie() {
  var name = document.getElementById("cookieName").value;
  var cookies = document.cookie.split(';');

  for (var i = 0; i < cookies.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    var cookie = cookies[i].trim();
    if (cookie.startsWith(name + '=')) {
      var cookieValue = cookie.substring(name.length + 1);
      document.getElementById("cookieResult").innerText = "Результат: Значення cookie '" + name + "': " + cookieValue;
      return;
    }
  }window.CP.exitedLoop(0);

  document.getElementById("cookieResult").innerText = "Результат: Cookie з ім'ям '" + name + "' не знайдено!";
}
//# sourceURL=pen.js

// Запис 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