Куки JavaScript

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

Что такое куки?

Куки — это данные, хранящиеся на вашем компьютере в小的ых текстовых файлах.

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

Куки были изобретены для решения проблемы «как запомнить информацию пользователя»:

  • Когда пользователь посещает веб-страницу, его имя может быть сохранено в куки.
  • При следующем посещении этой страницы куки «запомнят» имя пользователя.

Куки хранятся в паре имя-значение, например:

username = Bill Gates

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

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

Создание куки с помощью JavaScript

JavaScript может использовать document.cookie Создание, чтение и удаление свойств куки.

С помощью JavaScript можно так создать куки:

document.cookie = "username=Bill Gates";

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

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

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

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Чтение cookie через JavaScript

Через JavaScript, вы можете так читать cookie:

var x = document.cookie;

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

Изменение cookie через JavaScript

Используя JavaScript, вы можете изменить cookie так же, как вы его создали:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Старый cookie перезаписан.

Удаление 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 Свойства кажутся как обычная текстовая строка. Но это не так.

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

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

cookie1 = value; cookie2 = value;
　 　 　

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

Пример с использованием JavaScript Cookie

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

Когда visitor впервые arrives на веб-страницу, ему будет предложено ввести имя. Затем это имя будет сохранено в cookie.

Следующий посетитель, который придет на эту страницу, получит приветствие.

Например, мы создадим 3 функции JavaScript:

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

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

Сначала мы создаем функцию, которая хранит имя посетителя в переменной 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=/";
}

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

Параметры этой функции: имя cookie (cname), значение cookie (cvalue) и количество дней до истечения срока cookie (exdays).

Эта функция устанавливает cookie, добавляя имя cookie, его значение и строку истечения срока.

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

Затем, мы создаем функцию, которая возвращает значение指定的 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 "";
}

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

Используйте cookie в качестве параметра (cname).

Создайте переменную (name) и текст, который нужно поискать (CNAME”=”).

Декодируйте строку cookie, обрабатывайте cookie с特殊ными символами, например “$”.

Разделите document.cookie точками с запятой и поместите их в массив под названием 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("Welcome again " + username);
    }
        username = prompt("Please enter your name:", "");
        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);
    }
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

Попробуйте сами

Примеры, приведенные выше, будут выполняться после загрузки страницы с функцией checkCookie().