NexxDigital - компьютеры и операционные системы

Сегодня поработаем с Cookie силами JavaScript. "Для чего это можеть быть нужно?" - спросите вы. Да, для чего угодно, например мы вносим какие-то правки в код и не хотим, чтобы изменения были видны пользователям, очевидное решение сделать проверку на наличие куки у клиента, и если кука есть, то показывать наше изменения этому пользователю. Но как ее повесить только определенному пользователю? Для этого мы и будем использовать JavaScript.

Что такое Cookie?

Cookie(куки) - текстовые файлы ограниченные размером до 4кб, в которые браузер записывает данные полученные от веб серверов(сайтов на которые вы заходили). Могут содержать любую ифнормацию, но в основном хранят такие данные которые позволяют запоминать сайтам своих посетителей, например чтобы на запрашивать данные для авторизации или сохранить информацию о товарах добавленных в корзину. Хранятся данные фалйлы на стороне клиента.

Для работы с куками будем использовать свойство document.cookie предстовляющее собой строку состоящую из пар ключ=значение и разделяемых; и пробелом между собой. Ниже приведен пример того, что выведет запущенный в консоли document.cookie.

Как добавить свою куку силами JS.

Добавить свою куку очень просто. Выполним в консоли document.cookie = "user=Nikola"; Готово, наша кука добавлена. Теперь рассмотрим ряд важных настроек, нужно стараться их указывать, чтобы не использовать настройки по умолчанию.

1. path=/mypath - путь по которому будет доступны cookie, если не указывать, то возмется текущий путь и пути ниже него, поэтому в качестве значения возьмем path=/ т.е. корень, куки доступен со всех страниц сайта.

2. expires - Дата истечения жизни cookie в формате GMT. Если дату не указывать, то куки будут считаться ссессионными и будут удалены после закрытия браузера.

Напишем простую функцию для добавления cookie.

Function setCookie(name, value, days, path) { path = path || "/"; // заполняем путь если не заполнен days = days || 10; // заполняем время жизни если не получен параметр var last_date = new Date(); last_date.setDate(last_date.getDate() + days); var value = escape(value) + ((days==null) ? "" : "; expires="+last_date.toUTCString()); document.cookie = name + "=" + value + "; path=" + path; // вешаем куки } setCookie("user","Nikola", 2, "/"); // запустим функциию и добавим куки.

Как удалить куки с помощью JS.

Для удаления Cookie необходимо задать ей прошлую дату. Например воспользуемся нашей функцией setCookie(); и удалим нашу куку user;

setCookie("user","Nikola", -2, "/");

Кука удалена, но что делать если нужно удалить все куки какие есть? Для этого напишем новую функцию.

Function deleteCookie() { var del_co = document.cookie.split(";"); while(name = del_co.pop()) { setCookie(name.split("="),"11", -20, "/"); } }

Что такое cookies?

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

Обычно эти данные используются на сайте для того, чтобы:

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

Механизм работы с cookies рассмотрим на следующем примере:

Принцип работы механизма cookies

  • Клиент (веб-браузер) посылает серверу запрос (запрашивает у него страницу). Если в браузере есть cookies, связанные с этим сайтом, то он их посылает серверу в составе этого запроса.
  • Сервер получает запрос от клиента. Если в составе запроса есть куки, то их можно использовать для выполнения некоторой логики на сервере, подготовки пользователю персонализированной страницы или для чего-то другого. После этого отправляем клиенту ответ. В заголовке ответа отправляем веб-браузеру (клиенту) cookies, которые ему нужно будет сохранить.
  • Веб-браузер (клиент) получает ответ от сервера (страницу) и выводит его пользователю. Куки, которые пришли с сервера, браузер сохраняет в своё хранилище.
  • JavaScript - document.cookie

    // получить значения всех cookies страницы var cookies = document.cookie; // выведем куки в консоль браузера console.log(cookies); // выведем с помощью функции alert alert(cookies);

    Данное свойство представляет собой строку и чтобы в ней что-то найти, например, определённую cookie (по ключу), её необходимо разобрать. Для этого нужно написать JavaScript код (например, с использованием регулярных выражений) или воспользоваться специально предназначенного для этого библиотекой js-cookie . Данная библиотека, кроме функции чтения куки, имеет также методы для её установки и удаления.

    Библиотека js-cookie

    js-cookie - библиотека JavaScript, предоставляющая методы для удобной работы с cookies.

    Подключение js-cookie к странице Установка (set) cookie Запись cookie осуществляется с помощью функции set: // name - ключ (имя) куки // value - значение, связанное с ключом name // attributes (необязательный параметр) - атрибуты куки в формате объекта Cookies.set("name", "value"[,attributes]); Установить cookie для всех страниц сайта: Cookies.set("nameCookie", "valueCookie"); // => "nameCookie=valueCookie; path=/" Создать cookie, действительную 30 дней (от текущего момента времени) и видимую любыми страницами сайта: Cookies.set("nameCookie", "valueCookie", { expires: 30 }); // => "nameCookie=valueCookie; path=/; expires=Thu, 13 Apr 2017 13:00:15 GMT" Выполнить запись куки, доступ к которой будет иметь только текущая страница (срок хранения 365 дней): Cookies.set("nameCookie", "valueCookie", { expires: 365, path: "" }); // => "nameCookie=valueCookie; expires=Wed, 14 Mar 2018 13:00:36 GMT" Получение (get) куки Чтение значения cookie осуществляется с помощью метода get: Cookies.get("nameCookie"); // => "valueCookie" Cookies.get("otherCookie"); // => undefined Получить все доступные cookies: Cookies.get(); // => {nameCookie: "valueCookie"} Удаление (remove) cookie Для удаления куки предназначена функция remove: Cookies.remove("nameCookie"); Удаление cookie с указанием атрибута path: Cookies.set("name", "value", { path: "" }); Cookies.remove("name", { path: "/" }); // не получится (не правильный путь) Cookies.remove("name", { path: "" }); // удалится (указан правильный путь)

    Важно! Когда вы удаляете cookie, вы должны указать тот же самый путь и домен, который использовался для установки cookie. Если атрибуты куки в Cookies.remove не указать, то будут браться те, которые заданы по умолчанию в Cookies.defaults (приведён ниже).

    Например, удалим все cookies, имеющие в качастве пути значение "/": path = "/"; var cookies = Cookies.get(); for (var cookie in cookies) { Cookies.remove(cookie, { path: path }); } Установка атрибутов cookies Передача атрибутов при установке куки осуществляется посредством указания их в качестве значения последнего (3) аргумента функции Cookies.set . Cookies.set("name", "value", { expires: 365, path: "/news/", domain: "m.mydomain.ru", secure: true }); // => "name=value; path=/news/; expires=Wed, 14 Mar 2018 12:54:28 GMT; domain=m.mydomain.ru; secure"

    • expires - указывает длительность хранения cookie в браузере. Значение можно задавать как в формате числа (количество дней от текущего момента времени), так и ввиде даты. Если данный параметр не указать, то cookie будет ссесионным, т.е. он удалится после закрытия браузера.

      Например, установим cookie на 30 дней (в качестве формата expires будем использовать дату):

      // функция, возвращающая дату, которая будет через указанное количество дней от текущей function getDateExpires(days) { var date = new Date; date.setDate(date.getDate() + days); return date; } // запись cookie nameCookie=valueCookie Cookies.set("nameCookie", "valueCookie", { expires: getDateExpires(30) }); // => "nameCookie=valueCookie; path=/; expires=Thu, 13 Apr 2017 12:34:13 GMT"

    • path - строка, указывающая путь (по умолчанию: / ), посредством которого будет определяться видимость (доступность) cookie. Cookie для некоторой страницы доступна только тогда, когда её path входит в адрес. По умолчанию куки видимы для всех страниц сайта.

      Cookie, которая будет иметь в качестве пути текущее местоположение документа:

      Cookies.set("nameCookie", "valueCookie", { path: "" }); // => "nameCookie=valueCookie"

    • domain - строка, указывающая домен (по умолчанию: текущий), в котором cookie должна быть видна. При этом куки также будут доступны во всех поддоменах этого домена.
    • secure - устанавливает, необходимо ли при передаче cookies использовать безопасный протокол (https). По умолчанию: false (нет не требуется).
    • Кроме индивидуальной установки атрибутов куки при каждом вызове функции Cookies.set , их также можно назначить глобально посредством свойства defaults объекта Cookie . Cookies.defaults = { path: "/", expires: 365 }; Cookies.set("nameCookie", "valueCookie"); // => "nameCookie=valueCookie; path=/; expires=Wed, 14 Mar 2018 12:53:23 GMT" Данные атрибуты будут использоваться функцией Cookies.set по умолчанию. Другими словами только тогда, когда вы вызываете функцию Cookies.set без последнего (третьего) параметра.
    Куки и формат JSON

    Библиотека js-cookie позволяет очень просто установить в качестве значения куки не только текстовое значение, но и данные в формате массива или объекта (а точнее их строковое представление посредством JSON.stringify):

    Cookies.set("name", { name1: "value1", name2: "value2" });

    Выполнять чтение cookie (имеющей в качестве значения JSON) с помощью функции Cookies.get не очень удобно, т.к. на выходе вы получите обычную строку (а не массив или объект).

    Cookies.get("name"); // => "{"name1":"value1","name2":"value2"}" Cookies.get(); // => {name:"{"name1":"value1","name2":"value2"}"}

    Для этого можно воспользоваться функцией Cookies.getJSON . Данная функция не только получает cookie, но и разбирает её с помощью JSON.parse:

    Cookies.getJSON("name"); // => {name1: "value1", name2: "value2"} Cookies.getJSON("name")["name1"]; // => "value1" Cookies.getJSON("name")["name2"]; // => "value2" Cookies.getJSON(); // => {name: {name1:"value1", name2:"value2"}}

    Cookies файлы

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

    Прикладной интерфейс для работы с cookies является одним из старейших, а это означает, что он поддерживается всеми браузерами. К сожалению, этот прикладной интерфейс слишком замысловат. В нем отсутствуют методы: операции чтения, записи и удаления cookies осуществляются с помощью свойства cookie объекта Document с применением строк специального формата. Срок хранения и область видимости можно указать отдельно для каждого cookie с помощью атрибутов. Эти атрибуты также определяются посредством записи строк специального формата в то же самое свойство cookie.

    Поддержка cookies

    Cookies пользуются дурной славой у многих пользователей Всемирной паутины из-за недобросовестного использования cookies, связанных не с самой веб-страницей, а с изображениями на ней.

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

    Поэтому, прежде чем использовать cookies в сценариях JavaScript, следует проверить, не отключен ли режим их сохранения. В большинстве браузеров это можно сделать, проверив свойство navigator.cookieEnabled . Если оно содержит значение true, значит, работа с cookies разрешена, а если false - запрещена (хотя при этом может быть разрешено использование временных cookies, срок хранения которых ограничивается продолжительностью сеанса работы браузера).

    Свойство navigator.cookieEnabled не является стандартным, поэтому если сценарий вдруг обнаружит, что оно не определено, придется проверить, поддерживаются ли cookies, попытавшись записать, прочитать и удалить тестовый cookie.

    Атрибуты cookie: срок хранения и область видимости

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

    Видимость cookie ограничивается происхождением документа, а также строкой пути к документу. Область видимости cookie может регулироваться посредством атрибутов path и domain . По умолчанию cookie связывается с создавшей его веб-страницей и доступен этой странице, а также другим страницам из того же каталога или любых его подкаталогов.

    Если, например, веб-страница http://www.example.com/catalog/index.html создаст cookie, то этот cookie будет также видим страницам http://www.example.com/catalog/order.html и http://www.example.com/catalog/widgets/index.html, но невидим странице http://www.example.com/about.html.

    Этого правила видимости, принятого по умолчанию, обычно вполне достаточно. Тем не менее иногда значения cookie требуется использовать на всем многостраничном веб-сайте независимо от того, какая страница создала cookie. Например, если пользователь ввел свой адрес в форму на одной странице, целесообразно было бы сохранить этот адрес как адрес по умолчанию. Для этого в cookie можно определить атрибут path. И тогда любая страница того же веб-сервера с URL-адресом, начинающимся с указанного значения, сможет использовать этот cookie.

    Например, если для cookie, установленного страницей http://www.example.com/catalog/widgets/index.html, в атрибуте path установлено значение «/catalog», этот cookie также будет виден для страницы http://www.example.com/catalog/order.html. А если атрибут path установлен в значение «/», то cookie будет видим для любой страницы на веб-сервере http://www.example.com.

    По умолчанию cookies доступны только страницам с общим происхождением. Однако большим веб-сайтам может потребоваться возможность совместного использования cookies несколькими поддоменами. Например, серверу order.example.com может потребоваться прочитать значения cookie, установленного сервером catalog.example.com. В этой ситуации поможет атрибут domain. Если cookie, созданный страницей с сервера catalog.example.com, имеет в атрибуте path значение «/», а в атрибуте domain - значение «.example.com», этот cookie будет доступен всем веб-страницам в поддоменах catalog.example.com, orders.example.com и в любых других поддоменах в домене example.com. Если атрибут domain не установлен, его значением по умолчанию будет имя веб-сервера, на котором находится страница. Обратите внимание, что в атрибут domain нельзя записать значение, отличающееся от домена вашего сервера.

    Последний атрибут cookie - это логический атрибут с именем secure , определяющий, как значения cookie передаются по сети. По умолчанию cookie не защищен, т.е. передается по обычному незащищенному HTTP-соединению. Однако если cookie помечен как защищенный, он передается, только когда обмен между браузером и сервером организован по протоколу HTTPS или другому защищенному протоколу.

    Сохранение cookies

    Чтобы связать временное значение cookie с текущим документом, достаточно присвоить его свойству cookie строку следующего формата:

    имя=значение

    Например:

    Document.cookie = "version=" + encodeURIComponent(document.lastModified);

    При следующем чтении свойства cookie сохраненная пара имя/значение будет включена в список cookies документа. Значения cookie не могут содержать точки с запятой, запятые или пробельные символы. По этой причине для кодирования значения перед сохранением его в cookie, возможно, потребуется использовать глобальную JavaScript-функцию encodeURIComponent(). В этом случае при чтении значения cookie надо будет вызвать соответствующую функцию decodeURIComponent().

    Записанный таким способом cookie сохраняется в течение сеанса работы веб-браузера, но теряется при его закрытии пользователем. Чтобы создать cookie, сохраняющийся между сеансами браузера, необходимо указать срок его хранения (в секундах) с помощью атрибута max age. Это можно сделать, присвоив свойству cookie строку следующего формата:

    имя=значение; max-age=число_секунд

    Следующая функция устанавливает cookie с дополнительным атрибутом max-age:

    // Сохраняет пару имя/значение в виде cookie, кодируя значение с помощью // encodeURIComponent(), чтобы экранировать точки с запятой, запятые и пробелы. // Если в параметре daysToLive передается число, атрибут max-age // устанавливается так, что срок хранения cookie истекает через // указанное число дней. Если передать значение 0, cookie будет удален function setCookie(name, value, daysToLive) { var cookie = name + "=" + encodeURIComponent(value); if (typeof daysToLive === "number") cookie += "; max-age=" + (daysToLive*60*60*24); else throw new Error("Параметр daysToLive должен быть числом."); document.cookie = cookie; }

    Аналогичным образом можно установить атрибуты path, domain и secure, дописав к значению cookie строки следующего формата перед его записью в свойство cookie:

    ; path=путь; domain=домен; secure

    Чтобы изменить значение cookie, установите его значение снова, указав то же имя, путь, домен и новое значение. При изменении значения cookie можно также переопределить срок его хранения, указав новое значение в атрибуте max-age.

    Чтобы удалить cookie, установите его снова, указав то же имя, путь, домен и любое произвольное (возможно пустое) значение, а в атрибут max-age запишите 0.

    Чтение cookies

    Когда свойство cookie используется в JavaScript-выражении, возвращаемое им значение содержит все cookies, относящиеся к текущему документу. Эта строка представляет собой список пар имя=значение, разделенных точками с запятой и пробелами. Значение не включает какие-либо атрибуты, которые могли быть установлены для cookie. При работе со свойством document.cookie обычно приходится использовать метод split(), чтобы разбить его значение на отдельные пары имя/значение.

    После извлечения значения cookie из свойства cookie его требуется интерпретировать, основываясь на том формате или кодировке, которые были указаны создателем cookie. Например, cookie можно передать функции decodeURIComponent(), а затем функции JSON.parse().

    В примере ниже определяется функция getCookie(), которая анализирует свойство document.cookie и возвращает объект, свойства которого соответствуют парам имя/значение всех cookies в документе:

    // Возвращает cookies документа в виде объекта с парами имя/значение. // Предполагается, что значения cookie кодируются с помощью // функции encodeURIComponent() function getCookies() { // Возвращаемый объект var cookies = {}; // Получить все cookies в одной строке var all = document.cookie; // Если получена пустая строка, вернуть пустой объект if (all === "") return cookies; // Разбить на пары имя/значение var list = all.split("; "); for(var i = 0; i

    Ограничения cookies

    Cookies предназначены для сохранения небольших объемов данных серверными сценариями, которые должны передаваться на сервер при обращении к каждому соответствующему URL-адресу. Стандарт, определяющий cookies, рекомендует производителям браузеров не ограничивать количество и размеры сохраняемых cookies, но браузеры не обязаны сохранять в сумме более 300 cookies, 20 cookies на один веб-сервер или по 4 Кбайт данных на один cookie (в этом ограничении учитываются и значение cookie, и его имя). На практике браузеры позволяют сохранять гораздо больше 300 cookies, но ограничение на размер 4 Кбайт для одного cookie в некоторых браузерах по-прежнему соблюдается.

    Подготовил: Андрей Косяк Дата публикации: 22.12.2010

    В первой статье Cookies — печем печеньки мы смотрели на куки с дальней дистанции, поэтому если ты разобрался в общих понятиях и назначении cookies — можно приступать непосредственно к выпечке (вот и духовочку я раздобыл), поэтому, надеваем кулинарный колпак и подходим поближе. Будем выпекать!

    Арт. подготовка

    Ты уже знаешь, что куки — строка, а также, знаешь, как выглядит кука глазами браузера. При установке в браузер, кука имеет вид все той же строки:

    "cookieName = cookieValue; expires = Fri, 21 Jan 2021 06:10:00 GMT; path = /; domain = lessons.сайт; secure = true; "

    Условия существования куки оговариваются пятью параметрами (парами ключ=значение) (ВАЖНО! После каждого должен стоять символ-разделитель ";"), рассмотрим их:

    Начинка куки

    "cookieName =cookieValue;" — основной параметр куки, без него кука теряет свой смысл. Здесь cookieName — уникальное имя для куки, а cookieValue — информация (значение), которую она будет хранить. Забегая немного вперед, скажу, что в качестве значения может быть что угодно, любая, удобная тебе, структура хранимых данных (да хоть JSON), а также какие угодно символы. Единственная пара, которая является обязательной при установке куки.

    Время жизни

    "expires =Fri, 21 Jan 2021 06:10:00 GMT" — эта пара хоть и необязательна, но играет очень важную роль, наряду с первой. Этот параметр определяет время жизни куки, а именно, с точностью до секунды, в указанную дату, кука «прикажет долго жить». Если этот параметр не указать, то кука будет действительна только в течение сессии, а это значит, что при закрытии браузера она будет удалена.

    Важным моментом является формат даты. Дата должна быть задана ТОЛЬКО в текстовом формате (Fri, 21 Jan 2021 06:10:00 GMT). Снова, забегая немного вперед, скажу, что в этом нам поможет объект Date, в нем есть все необходимые инструменты.

    Путь установки

    "path =/" — этим параметром задается путь (каталог), для которого действительна кука. Сейчас path имеет значение "/", это ничто иное, как корневой каталог, поэтому кука будет доступна для чтения абсолютно всем каталогам сайта. В случае если доступ к куке должен быть ограничен, то параметр path просто не указываем или указываем в нем общий родительский каталог, и кука будет установлена для конкретного каталога, но специфика такова, что кука будет доступна всем его подкаталогам, в то же время — не видна смежным и родительским каталогам.

    Для чего это? Представим элементарную ситуацию: интернет-кафе, сначала пришел пользователь Вася, поработал со своей страницей в соцсети, а после него пришел Петя и, на том же компьютере, в той же сети, поработал со своей страницей. Страницы участников находятся в одном домене, но лежат, как правило, в смежных каталогах. К примеру: страница Васи — http://socset.com/vasya, страница Пети — http://socset.com/petya. Можно представить, какой будет хаос, если куки будут устанавливаться в корневой каталог: Вася сможет оперировать куками Пети и наоборот. Я думаю ни одному, ни другому такой вариант не понравится. Поэтому, в данном случае, будет уместно, если куки будут привязаны только к каталогу конкретного пользователя, следовательно, ко всем его подкаталогам.

    Домен

    "domain =lessons.сайт" — эта пара определяет домен, в котором действительны куки. Как правило, явно использовать приходится редко. Ситуация с этим параметром похожа на ситуацию с параметром path, с той разницей, что в Domain мы оперируем доменами и сабдоменами а не каталогами. Т.е., в данном случае, куки установленные для сабдомена lessons..сайт.. Если параметр не указан, то по умолчанию используется доменный адрес документа.

    Безопасность

    "secure =true" — параметр безопасности. Если этот параметр установлен в true, браузер отправит куки только тому серверу, который запросит их по безопасному каналу (SSL). Этот параметр также используется редко. По умолчанию принимает значение false.

    Первый блин комом?

    Вот теперь попробуем угостить наш браузер печенюшкой. В этом нам поможет объект document.cookie:

    Document.cookie = "firstCookie=Первый блин комом?; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;";

    Результат можно увидеть, открыв в своем браузере раздел куки или же банально:

    Document.cookie = "firstCookie=Первый блин комом?; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;"; alert(document.cookie);

    И совсем и не комом! Все гуд, кука на месте.

    Заметка

    Обращаю внимание на особенность браузеров на WebKit. Они отказываются ставить куки, если документ открыт локально. Я, обычно, в таких случаях пользуюсь локальным сервером, так же он понадобится при работе с AJAX. Поэтому, как говорится, маст хэв! К примеру, Denwer (ссылка в конце статьи).

    Больше cookies

    C одной кукой разобрались. А как быть, если нужно хранить, к примеру, данные из формы (логин, e-mail, номер телефона и т.п.)? В таком случае можно поступить так:

    Document.cookie = "myLogin=Мой логин; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;"; document.cookie = "[email protected]; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;"; document.cookie = "myPhone=1234567; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;";

    Таким образом, имеем три куки, которые хранят соответственно логин, электронный ящик и номер телефона. Но ты же помнишь, об ограничениях на количество куков от одного домена, впрочем, как и их общего количества? Значит, таким способом мы можем хранить только ограниченное количество значений для полей. А если такое ограничение "связывает" нам руки, мы можем поступить так:

    Var formData = escape("Мой логин;[email protected];1234567"); document.cookie = "myFormCookie="+formData+"; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;";

    В итоге имеем 1 используемое место под куку. Все данные я "склеил" в одну переменную и разделил их символом ";", впрочем, в качестве разделителя внутри переменной можно использовать любой символ, это уже наша инициатива, здесь только нужно позаботиться о том, чтоб этот разделитель не встречался в значениях полей, иначе возникнут трудности в дальнейшем, когда нужно будет их прочесть. В таком случае, конечно же, нужно еще помнить об ограничении на размер куки (4кб).

    Зачем функция escape? Все довольно просто, она кодирует значение куки в 16-ричное представление. Для чего? Во-первых, браузер отправляет куки серверу, а для того, чтоб данные одинаково могли быть прочтены на серверах под любыми системами, используется данная кодировка. Во-вторых, если мы, используя разделитель ";" в переменной со значениями полей, не закодируем эту строку, то кука, по меньшей мере, просто не правильно установится, ведь разделитель ";" используется для отделения параметров самой куки. Этот момент нужно взять на вооружение и, впредь, использовать по-умолчанию при передаче информации (cookie, AJAX).

    "…и время ни на миг не остановишь"

    Теперь разберемся с параметром expires. Неудобство в том, что до этого момента мы прописывали время жизни для куки вручную. Но, в реальных условиях, такой подход практически не применим. Как минимум, потому, что при каждом очередном заходе на сайт, время жизни куков должно продлеваться на какой-то фиксированный строк, что, вобщем-то, оправдано и логично. Поэтому в данном вопросе нам полностью поможет объект Date:

    Var formData = escape("Мой логин;[email protected];1234567"); cookieExp = new Date(); // создаем объект Date cookieExp.setMonth(cookieExp.getMonth()+1); // устанавливаем текущий месяц и к нему добавляем еще один document.cookie = "myFormCookie="+formData+"; expires="+cookieExp.toGMTString()+"; path=/;";

    Такими действиями мы установили время жизни куки ровно в 1 месяц. Подробно на объекте Date в этой статье оснавливаться не буду, лишь опишу схему установки срока:

    • строка 2: объявляем cookieExp как объект Date. Теперь cookieExp содержит текущую дату;
    • строка 3: переустановка в cookieExp месяца. При помощи метода getMonth извлекаем текущий месяц и прибавляем к нему еще один. В итоге в cookieExp запишется следующий месяц;
    • строка 6: в этой строке используем метод toGMTString(), для перевода даты в текстовый формат;

    Таким образом, в зависимости от того, какое время жизни для куки нужно установить, можно использовать и другие методы объекта Date: от get/setMilliseconds() до get/setFullYear() (от получения/установки миллисекунд до получения/установки года).

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

    Вывод

    Как видишь, установка куков не есть чем-то сверхъестественным, нужно только помнить (какой раз уже повторяюсь:)) об ограничениях и все будет типи-тип, ну, или топи-топ. Следующий материал будет о том, как наши печеньки достать из духовочки. Вот там придется немного поразмышлять.

    Куда дальше
    • следующая — Cookies — извлечение
    • предыдущая —

    Как включить куки и JavaScript?

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

    • аутентификации пользователя;
    • хранения персональных предпочтений и настроек пользователя;
    • отслеживания состояния сессии доступа пользователя;
    • ведения статистики о пользователях.

    Она не может быть доступна никакому другому сайту, кроме того, для которого создавалась. Эта информация не является запускаемым кодом и поэтому не несет никакой угрозы безопасности компьютера. Занимает она обычно столь ничтожный объем, что и говорить не стоит.
    HTTP-Cookie

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

    Для работы с нашим сайтом требуется разрешенное выполнение JavaScript и возможность записи файлов cookies. По умолчанию обе функции разрешены, и большинству пользователей не требуется делать ничего специального. Если же у вас возникли проблемы, значит кто-либо настроил ваш браузер «под себя», отключив у вас одну или обе возможности. Для дальнейшей работы с сайтом Вам требуется их включить.

    Нажмите кнопку «Инструменты» и выберите пункт «Настройки» .

    На вкладке «Приватность» в области «Firefox:» выберите параметр «будет использовать ваши настройки хранения истории»
    Снимите флажок для параметра «Автоматически запускать Firefox в режиме приватного просмотра» и установите флажок для параметров: «Принимать куки с сайтов» и «Принимать куки со сторонних сайтов» , затем нажмите «OK»

    В появившемся окне выбирите пункт «Содержимое» . Убедитесь, что около надписи «Использовать JavaScript» установлена галочка, если нет - поставьте.

    Теперь нажмите кнопу «OK» и перезагрузите браузер.

    Нажмите кнопку «Меню» и выберите пункт «Настройки».

    На вкладке «Расширенные» в области «Cookies» выберите параметр «Принимать cookies» .
    В области «Содержимое» установите галочку «Включить JavaScript» .

    Нажмите кнопу «OK» и перезагрузите браузер.

    Internet Explorer 8

    Нажмите кнопку «Сервис» и выберите пункт «Свойства обозревателя» .

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

    Щелкните вкладку «Конфиденциальность» и затем в области «Параметры» нажмите кнопку «По умолчанию» или установите ползунок, как показано на рисунке.
    На вкладке «Безопасность» повторите те же действия.

    Нажмите кнопку «OK» и перезагрузите браузер.

    Нажмите кнопку «Настройка и управление Google Chrome» и выберите пункт «Параметры»



    Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter
    ПОДЕЛИТЬСЯ:
    NexxDigital - компьютеры и операционные системы