Саша Бизиков

Младший дизайнер в ФанБоксе. Делал интерфейсы бизнес-процессов для сотрудников банка Тинькофф. Изучаю дизайн мобильных приложений и редактуру текста.

Работаем с куками через JavaScript

Практически все крупные сайты используют куки. По сути, куки — это небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя. Для чего они нужны? Куки обычно используют в следующих целях:

Как правило, реклама отображаемая на сайтах использует ваши куки для определения того, какой контент вам показывать 🙂 Для особых параноиков в настройках браузера всегда можно отключить хранение такой информации.

Запись

Сейчас поговорим о том, как записывать куки.

Для начала нужно проверить, разрешено ли хранить куки на компьютере пользователя или нет. Это делается следующим образом:

var cookie = navigator.cookieEnabled;

Если получаем значение true, значит браузер поддерживает куки. Можем действовать!

Хранятся они в виде «имя=значение». Простая функция, которая записывает новую куку:

function setCookie(name, value) {
    document.cookie = name + "=" + value;
}

Помимо этого у куки еще есть время жизни. Например:

expires=Tue, 1 Jan 2014 01:00:01 GMT

Дата истечения куки в формате GMT. Получить нужную дату можно, используя объект Date.

Чтение

Извлекать будем куку по известному нам имени. Для этого напишем функцию, чуть сложнее предыдущей:

function getCookie(name) {
        var cookie = " " + document.cookie;
        var search = " " + name + "=";
        var setStr = null;
        var offset = 0;
        var end = 0;
        if (cookie.length > 0) {
            offset = cookie.indexOf(search);
            if (offset != -1) {
                offset += search.length;
                end = cookie.indexOf(";", offset)
                if (end == -1) {
                    end = cookie.length;
                }
                setStr = unescape(cookie.substring(offset, end));
            }
        }
        return(setStr);
    }

Удаление

Если кука вам больше не нужна, ее можно удалить:

function deleteCookie(name) {
    var cookieDate = new Date();
    cookieDate.setTime(cookieDate.getTime() - 1);
    var cookie = name += "=; expires=" + cookieDate.toGMTString();
    document.cookie = cookie;
}

Использование

setCookie('bizikovru', 'hello');

Если посмотреть в консоли document.cookie, то увидим результат bizikovru = hello.

Извлекаем значение куки по ее имени с помощью функции getCookie

getCookie('bizikovru');

Данный очерк об использовании куки очень поверхностный и не претендует на оригинальность. Инормация для ознакомления.

UPD 15.08.2014: добавлена функция удаление куки

Ещё