САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

JS Учебник

JS Главная JS Введение JS Установка JS Вывод JS Синтаксис JS Заявления JS Комментарии JS Переменные JS Операторы JS Арифметика JS Присваивания JS Типы данных JS Функции JS Объекты JS Область JS События JS Строки JS Методы строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Даты JS Формат даты JS Метод получения дат JS Методы набора... JS Математические... JS Случайные числа JS Булевы JS Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Отладчик JS Подъемный JS Строгий JS Ключевое слово this JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

Определение объекта Свойства объекта Методы объекта Доступ к объекту Конструкторы объекта Прототипы объекта Объект ECMAScript 5

JS Функции

Определение функции Параметры функции Вызов Функции Вызвать Функцию Применение функции Закрытие Функции

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Слушатель события DOM Навигация DOM Узлы DOM Коллекции DOM Список узлов

JS Браузера BOM

JS Окно JS Экран JS Местоположение JS История JS Навигатор JS Всплывающее окна JS Синхронизация JS Cookies

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос AJAX Ответ AJAX XML Файл AJAX PHP AJAX ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS или jQuery

jQuery Селекторы jQuery HTML jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввод


JavaScript Cookies



Файлы cookie позволяют хранить информацию о пользователе на веб-страницах.


Что такое Cookies?

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

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

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

  • Когда пользователь посещает веб страницу, его имя может быть сохранено в файле cookie.
  • В следующий раз, когда пользователь заходит на страницу, файл cookie "запоминает" его имя.

Файлы cookie сохраняются в парах имя-значение, таких как:

username = Андрей Щипунов

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

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


Создайте файл Cookie с помощью JavaScript

JavaScript может создавать, читать и удалять файлы cookie вместе с свойством document.cookie.

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

document.cookie = "username=Андрей Щипунов";

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

document.cookie = "username=Андрей Щипунов; expires=Thu, 18 Dec 2013 12:00:00 UTC";

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

document.cookie = "username=Андрей Щипунов; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";


Чтение файлов Cookie с помощью JavaScript

С помощью JavaScript файлы cookie можно читать следующим образом:

var x = document.cookie;

document.cookie вернет все куки в одной строке примерно так: cookie1=value; cookie2=value; cookie3=value;


Изменение файла Cookie с помощью JavaScript

С помощью JavaScript вы можете изменить файл cookie так же, как и при его создании:

document.cookie = "username=Татьяна Щипунова; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Старые куки перезаписываются.


Удаление файлов Cookie с помощью JavaScript

Удалить файл cookie очень просто.

Вам не нужно указывать значение файла cookie при удалении файла cookie.

Просто установите параметр expires на прошедшую дату:

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

Вы должны определить путь к файлу cookie, чтобы убедиться, что вы удалите правильный файл cookie.

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


Строки Cookie

Свойство document.cookie выглядит как обычная текстовая строка. Но это не так.

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

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

cookie1 = value; cookie2 = value;

     

Если вы хотите найти значение одного указанного файла cookie, вы должны написать функцию JavaScript, которая ищет значение файла cookie в строке файла cookie.


Пример JavaScript Cookie

В следующем примере мы создадим файл cookie, который хранит имя посетителя.

Первый раз, когда посетитель заходит на веб страницу, он/она будет предложено заполнить его/ее имя. Затем имя сохраняется в файле cookie.

В следующий раз, когда посетитель придет на ту же страницу, он/она получит приветственное сообщение.

Для примера мы создадим 3 функции JavaScript:

  1. Функция для установки значения файла cookie
  2. Функция для получения значения файла cookie
  3. Функция для проверки значения файла cookie

Функция для установки файла cookie

Во-первых, мы создаем function, которая хранит имя посетителя в переменной 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), значение cookie (cvalue и количество дней до cookie должен истекать (exdays).

Функция устанавливает файл cookie путем сложения имени файла cookiename, значения файла cookie и строки expires.


Функция для получения файла cookie

Затем мы создаем function, которая возвращает значение указанного файла cookie:

Пример

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 "";
}

Объяснение функции:

Возьмите в качестве параметра cookiename (cname).

Создайте переменную (name) с текстом для поиска (cname + "=").

Декодируйте строку cookie, чтобы обрабатывать файлы cookie специальными символами, например: '$'

Разделите document.cookie на точке с запятой в массиве под названием ca (ca = decodedCookie.split(';')).

Цикл через массив ca (i = 0; i < ca.length; i++), и считывать каждое значение c = ca[i]).

Если cookie не найден (c.indexOf(name) == 0), возвращает значение cookie (c.substring(name.length, c.length).

Если cookie не найдено, вернется "".


Функция проверки файлов cookie

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

Если cookie установлен он будет отображать приветствие.

Если файл cookie не установлен, он отобразит окно запроса, запрашивающее имя пользователя и сохранит файл cookie имени пользователя в течение 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("Добро пожаловать снова " + user);
  } else {
    user = prompt("Пожалуйста, введите свое имя:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}
Попробуйте сами »

Приведенный выше пример запускает функцию checkCookie() при загрузке страницы.