Курс навчання javascript cookies та зберігання стану

Як ми вже говорили, при кожному завантаженні сторінки і при кожному її оновленні скрипти починають виконуватися заново. З одного боку - це добре, тому що можна не турбуватися про попередні станах скрипта. Але з іншого боку - іноді треба зберігати дані про попередніх діях або введених пользователм даних.

Cookie - це невеликий текстовий блок, який браузер зберігає на диск при першому завантаженні сторінки. При оновленні сторінки cookie буде автоматично посланий сервера разом з GET- або POST-запитом.

Зазвичай cookie використовуються для зберігання невеликих фрагментів даних, таких як ідентифікатори сесії PHP, тимчасові сеансові ключі, хеші паролів і т.д. Максимальний обсяг даних, який можна зберегти в одному cookie, становить 4 КБ, а середній обсяг cookie зазвичай не перевищує кілобайт. Захоплюватися зберіганням даних з cookies не варто, тому що вони відправляються на сервер при кожному оновленні сторінки. Так що якщо ваша сторінка «важить» 10 Кб, а в cookie ви зберегли всі 4 КБ - то ваш трафік зросте майже в півтора рази.

Будь-cookie містить кілька полів з фіксованими іменами:

Дата і час закінчення "терміну придатності" cookie. Після досягнення цього часу він більше не буде надсилатися на сервер. Якщо цей параметр не вказано - cookie зберігається до закриття браузера. Параметр повинен завжди задаватися в форматі "День, Число-Ден-РРРР ГГ: ХХ: СС GMT", Наприклад:

Шлях на сервері, для якого буде використовуватися цей cookie. Якщо ви хочете задати cookie для всього сервера - поставте "/"

Параметр визначає, чи треба використовувати для передачі cookie шифрування з'єднання (HTTPS). Якщо не встановлено - використовується звичайне з'єднання.

Крім фіксованих полів, ви можете задавати свої. Елементи задаються в форматі "ІМ'Я = ЗНАЧЕННЯ", наприклад:

Перед тим, як запросити сторінку на сервері, браузер перевіряє, чи є у нього вже cookie від даного сервера (поля path і domain). Якщо є і їх «термін придатності» не закінчився (поле expires) - відправляє знайдені дані сервера. Застарілі cookie браузер при запиті сторінки просто ігнорує.

Тепер розглянемо порядок роботи з cookies.

Єдиний спосіб дістатися до cookies поточного документа - використовувати вбудований об'єкт document.cookies. По суті це рядок, що містить всі cookie, один за іншим, розділені крапкою з комою:

Новий cookie додається звичайним присвоєнням об'єкту document.cookie нового значення:

Зверніть увагу, що при зворотної операції ви отримаєте не останній встановлений cookie, а ВСЕ cookies, відповідні до даного документа:

Розглянемо комплексний приклад, створимо кілька функцій для маніпулювання cookies.

Тепер розглянемо приклад використання наших функцій:

Як бачите, користуватися cookie досить просто. Головне - правильно формувати відповідні рядки параметрів.

В даний час практично всі браузери підтримують cookies. Деякі користувачі (приблизно 2-4%) примусово відключають таку підтримку, хоча особисто я нічого небезпечного в cookies не бачу. Максимум, чим можуть зашкодити включені cookies - зловмисник зможе дізнатися ваш логін і пароль поштової скриньки, та й то - якщо ви будете занадто безтурботні і почнете відкривати з веб-інтерфейсу поштовика всякі листівки, жарти та інші небезпечні капості.

Визначити, включені у користувача cookie чи ні можна за допомогою такої функції:

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

Схожі статті