BOM - JavaScript Cookies

Cookies или "кукисы" позволяют хранить пользовательскую информацию в веб-страницах.

Что такое cookies?

Cookies — это данные, хранящиеся в небольших текстовых файлах на компьютере пользователя.

После того, как веб-сервер послал веб-страницу пользователю, соединение закрывается, и сервер все забывает о пользователе.

Cookies и были придуманы для того, чтобы решить проблему "как запомнить информацию о пользователе сайта":

  • Когда пользователь посещает веб-страницу, его данные (например, имя) могут сохраняться в cookies.
  • В следующее посещение этой страницы пользователем, cookies будут "помнить" его данные.

Cookies сохраняются в виде пары имя-значение:


username = John Doe 

Когда браузер посылает серверу запрос на веб-страницу, cookies, относящиеся к этой странице, добавляются к запросу. Таким образом, сервер получает необходимые данные, которые позволяют "помнить" информацию о пользователе.

Внимание! Ни один из примеров, приведенных в этой главе, не будет работать, если в вашем браузере отключена поддержка cookies.

Создание cookies при помощи JavaScript

JavaScript может создавать, читать и удалять cookies при помощи свойства document.cookie.

Создать cookies при помощи JavaScript можно следующим образом:


document.cookie = "username=John Doe"; 

По умолчанию, cookies удаляются, когда браузер закрывается. Вы можете добавить дату (в UTC), когда истечет действие cookies:


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

При помощи параметра path вы можете указать браузеру, к какому пути относятся cookies. По умолчанию, cookies относятся к текущей странице:


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

Чтение cookies при помощи JavaScript

Прочитать cookies при помощи JavaScript можно следующим образом:


var x = document.cookie; 

document.cookie вернет все cookies в одной строке: "cookie1=значение; cookie2=значение; cookie3=значение;".

Изменение cookies при помощи JavaScript

Изменяются cookies при помощи JavaScript так же, как создаются:


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

При этом старые cookies переписываются.

Удаление cookies при помощи JavaScript

Удалить cookies очень просто.

Когда вы удаляете cookies, то не нужно определять для них значения.

Для удаления cookies достаточно в параметре expires задать уже прошедшую дату:


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

Внимание! Следует убедиться, что параметр path соответствует заданному в cookies пути. Иначе можно удалить не тот cookies. При этом некоторые браузеры не позволяют удалять cookies, если не задан параметр пути path.

Строка cookies

Значение свойства document.cookie кажется обычной текстовой строкой. Но это не так.

Даже если вы запишите в document.cookie целую строку "кукиса", когда вы ее прочитаете обратно, вы увидите только пару "имя-значение".

Если вы устанавливаете новый кукис, более старые кукисы не затираются. Новые кукисы добавляются к document.cookie, и, если вы снова прочитаете document.cookie, вы получите что-то вроде "кукис1 = значение; кукис2 = значение;".

Таким образом, если вам нужно найти значение какого-то конкретного кукиса, вы должны написать JavaScript функцию, которая будет искать значение нужного кукиса в строке кукисов.

Пример использования cookies

Ниже мы напишем пример скрипта на JavaScript, который будет создавать cookies для сохранения имени посетителя.

Когда пользователь в первый раз зайдет на веб-страницу, мы попросим его ввести свое имя. Затем мы сохраним это имя в cookies.

Когда пользователь еще раз зайдет на эту же страницу, мы выведем сообщение с приветствием.

Для полноценной работы этого примера мы создадим три функции JavaScript:

  1. Функция, которая будет устанавливать значение cookies
  2. Функция, которая будет читать значение cookies
  3. Функция, которая будет проверять значение cookies

Функция, которая устанавливает cookies

Сначала мы напишем функцию, которая будет сохранять имя посетителя в переменной cookie:


function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} 

Объяснение примера:

  • Параметрами функции являются имя "кукиса" (cname), значение "кукиса" (cvalue) и число дней до окончания действия "кукиса" (exdays).
  • Функция устанавливает cookies добавляя в одну строку имя "кукиса", значение и дату его окончания.

Функция, которая читает cookies

Теперь мы создаем функцию, которая возвращает значение заданного cookies:


function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
}

Как функция работает:

  • В качестве параметра принимаем имя "кукиса" (cname).
  • Создаем переменную (name) с текстом, который будем искать (cname + "=").
  • Декодируем строку с cookies, чтобы обработать специальные символы, например, '$'
  • Разбиваем значение document.cookie по символу ";" и помещаем результат в массив ca (ca = decodedCookie.split(';')).
  • В цикле обходим массив ca (i = 0; i < ca.length; i++) и читаем каждое значение в переменную (c = ca[i]).
  • Если "кукис" найден (c.indexOf(name) == 0), возвращаем его значение (c.substring(name.length, c.length).
  • Если "кукис" не найден, возвращаем пустую строку "".

Функция, которая проверяет cookies

И, наконец, мы создадим функцию, которая проверяет, установлен ли cookies.

Если cookies установлен, то выводится приветствие.

Если cookies не установлен, то выводится всплывающее окно с предложением пользователю ввести свое имя, которое затем сохраняется на 365 дней при помощи функции setCookie():


function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("С возвращением, " + username);
    } else {
        username = prompt("Введите ваше имя:", "");
        if (username != "" && username != null) {
            setCookie("username", username, 365);
        }
    }
}

Все вместе


function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    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);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

В приведенном выше примере функция checkCookie() запускается сразу же после загрузки страницы.