Куки (cookies)

Переменные живут ограниченное время, пока открыта страница. Чтобы сохранить какие-нибудь данные, можно использовать специальные текстовые файлы cookies (куки). Например, можно запомнить имя пользователя и при следующем заходе, не предлагать пользователю заново заполнять форму.

Куки не являются частью JavaScipt, они используются браузерами для своих целей. И мы можем использовать их в своих интересах. Куки сохраняются под уникальными именами и имеют срок хранения, после которого самостоятельно уничтожаются. Пользователь также может сам почистить куки в любое время. Можно создавать временные куки без срока хранения, которые сотрутся после закрытия браузера. Сами по себе они представляют обычный текстовый документ, связанный с сайтом (или доменом). Данные отделяются друг от друга точкой с запятой (;), который является разделителем.

Существуют специальные методы для работы с куками. Для удобства стоит создать вспомогательные методы readCookie(), writeCookie(), eraseCookie(), облегчающие работу с ними (нашёл в одной книжке).


function writeCookie(name, value, days) {
    // По умолчанию куки являются временными, не имея срока хранения
    var expires = "";
    
    // Указав число дней, вы сделаете куки постоянными
    if(days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    
    // Присвоим куки имя, значение и срок хранения
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    // Найдем конкретный куки и вернем его значение
    var searchName = name + "=";
    var cookies = document.cookie.split(';');
    for(var i = 0; i < cookies.length; i++) {
        var c = cookies[i];
        while (c.charAt(0) == ' ')
            c = c.substring(1, c.length);
        if(c.indexOf(searchName) == 0)
            return c.substring(searchName.length, c.length);        
    }
    return null;
}

function eraseCookie(name){
    // Удалим выбранный куки
    writeCookie(name, "", -1);
}

Можно создать отдельный файл cookies.js и добавить этот код в него. Далее подключаем файл.


<script type="text/javascript" src="cookies.js"></script>

Напишем сценарий приветствия пользователя по имени.


function greetUser() {
    userName = readCookie("username");
    
    if (userName) {
        alert("Привет " + userName + ", я скучал по тебе");
    else
        alert("Привет, новый друг");    
    }
}

Теперь напишем метод записи имени пользователя в куки.


function touchImage() {
    if(userName) {
        alert("Рад вас видеть, " + userName);
    }
    else {
        userName = prompt("Ваше имя?", "Введите ваше имя");
        if(userName) {
            alert("Приятно познакомиться, " + userName);
            writeCookie("username", userName, 5 * 365);
        }
    }
    document.getElementById("switcher").src = "../img/off.gif";
    setTimeout("document.getElementById('switcher').src = '../img/on.gif';", 5 * 1000);
}

Метод вызывается при щелчке на картинке.


<img src="../img/on.gif" id="switcher" style="cursor:pointer" onclick="touchImage()"; />

При первом посещении, когда пользователь нажмёт на картинку, будет предложено ввести имя. Имя сохранится в куках. При повторном нажатии имя будет извлечено из куки и подставлено в диалоговом окне.

Единственное, о чём нужно помнить - данные хранятся в открытом виде и хранить пароли в текстовых файлах не стоит.

Нужно помнить, что пользователь может отключить куки. Доступность куки можно проверить через свойство navigator.cookieEnabled.

Поэтому пример можно переделать:


function greetUser() {
    if(navigator.cookieEnabled)
        userName = readCookie("username");
    
    if (userName) 
        alert("Привет " + userName + ", я скучал по тебе");
    else
        alert("Привет, новый друг");    
}

function touchImage() {
    if(userName) {
        alert("Рад вас видеть, " + userName);
    }
    else {
        userName = prompt("Ваше имя?", "Введите ваше имя");
        if(userName) {
            alert("Приятно познакомиться, " + userName);
            if(navigator.cookieEnabled)
                writeCookie("username", userName, 5 * 365);
            else
                alert("Извините, куки не доступны в вашем браузере");       
        }
    }
    document.getElementById("switcher").src = "../img/off.gif";
    setTimeout("document.getElementById('switcher').src = '../img/on.gif';", 5 * 1000);
}

Куки (cookies)

Реклама