Печиво в JavaСценарій: приклад встановлення, отримання та видалення

Що таке Cookies?

Файл cookie – це фрагмент даних, який зберігається на вашому комп’ютері для доступу до нього через браузер. Ви також могли користуватися перевагами файлів cookie свідомо чи несвідомо. Чи траплялося вам коли-небудь залишатися авторизованими на такому сайті, як Facebook, щоб не вводити свої дані щоразу, коли ви намагаєтеся увійти? Якщо так, то ви використовуєте файли cookie. Файли cookie зберігаються як пари ключ/значення.

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

Навіщо вам потрібні файли cookie?

Спілкування між а веб-браузер і сервером відбувається за допомогою протоколу без збереження стану під назвою HTTP. Протокол без збереження стану обробляє кожен запит незалежно. Отже, сервер не зберігає дані після їх надсилання до браузера. Але в багатьох ситуаціях дані будуть потрібні знову. Тут на допомогу приходять файли cookie. Завдяки файлам cookie веб-браузеру не доведеться зв'язуватися із сервером щоразу, коли потрібні дані. Натомість їх можна буде отримати безпосередньо з комп'ютера.

Типові способи використання включають запам'ятовування сеансу входу в систему, збереження мовних або тематичних налаштувань, keeping товари в магазиніping кошик між сторінками та підрахунок відвідувачів, які вперше прийшли, та тих, хто повернувся.

Javascript Встановити файли cookie

Ви можете створювати файли cookie за допомогою властивості document.cookie ось так.

document.cookie = "cookiename=cookievalue"

Ви навіть можете додати термін дії до вашого файлу cookie, щоб конкретний файл cookie було видалено з комп’ютера у вказану дату. Термін дії слід встановити у форматі UTC/GMT. Якщо ви не встановите термін дії, файл cookie буде видалено, коли користувач закриє браузер.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

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

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

//створити cookie з доменом поточної сторінки та шляхом, що охоплює весь домен.

JavaСкрипт отримання файлів cookie

Ви можете отримати доступ до файлу cookie таким чином, який поверне всі файли cookie, збережені для поточного домену.

var x =  document.cookie

Повернене значення — це один рядок у форматі name1=value1; name2=value2Немає вбудованого методу для зчитування одного файлу cookie за назвою, тому рядок потрібно розділити. Допоміжний засіб нижче повертає одне значення та порожній рядок, якщо назва відсутня.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

вихід:

Ann Smith
true

JavaСценарій видалення файлу cookie

Щоб видалити файл cookie, вам просто потрібно встановити значення файлу cookie як empty, а значення expires – як дату, яка вже минула.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Одна деталь є причиною більшості невдалих видалень. Браузер ідентифікує файл cookie за його назвою, шляхом та доменом, тому оператор видалення має повторювати той самий шлях та домен, які використовувалися під час створення файлу cookie.

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Пояснення атрибутів файлів cookie

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

SameSite заслуговує на особливу увагу, оскільки браузери тепер застосовують значення за замовчуванням. Три прийнятні значення поводяться наступним чином.

• Суворий: Файл cookie ніколи не надсилається, коли запит походить з іншого сайту, що є найбезпечнішим налаштуванням для банківських сеансів.
• Лакс: Файл cookie поширюється разом із навігацією верхнього рівня, такою як клацання посилання, але не разом із зображеннями чи фреймами між сайтами. Це налаштування за замовчуванням у сучасному браузері.
• None: Файл cookie надсилається з кожним міжсайтовим запитом і має бути пов’язаний з атрибутом Secure, інакше браузер відхиляє його.

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Спробуйте цей приклад самі

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

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Очікувана поведінка:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code пояснення: Функція createCookie перетворює кількість днів на мілісекунди та додає їх до поточного часу, що створює дату закінчення терміну дії. Функція accessCookie розділяє рядок cookie на крапки з комою, обрізає кожен фрагмент та порівнює початок фрагмента із запитуваною назвою. Функція checkCookie пов'язує ці два значення разом під час завантаження сторінки.

Файли cookie проти локального сховища та сховища сеансу

Файли cookie – це не єдине місце, де браузер може зберігати дані. Існує два варіанти веб-сховища, і правильний вибір дозволяє уникнути надсилання непотрібних байтів при кожному запиті.

Практичне правило просте. Якщо серверу потрібне значення, використовуйте cookie. Якщо воно потрібне лише сторінці, використовуйте localStorage або sessionStorage, оскільки ці значення ніколи не додають ваги до мережевого запиту.

Код обробки файлів cookie зазвичай використовується багатьма сторінками, тому перегляньте внутрішні та зовнішні JavaScript перш ніж вирішити, де його розмістити. Розділення рядків, що використовується тут, базується на JavaРядки скриптів та JavaМетоди масивів скриптів, а подальші робочі скрипти з’являються в практичний JavaПриклади коду скриптів.

Поширені запитання