ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

JavaScript учебник

JS HOME JS Introduction JS Where To JS Output JS Statements JS Syntax JS Comments JS Variables JS Operators JS Arithmetic JS Assignment JS Data Types JS Functions JS Objects JS Scope JS Events JS Strings JS String Methods JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Dates JS Date Formats JS Date Get Methods JS Date Set Methods JS Math JS Random JS Booleans JS Comparisons JS Conditions JS Switch JS Loop For JS Loop While JS Break JS Type Conversion JS Bitwise JS RegExp JS Errors JS Debugging JS Hoisting JS Strict Mode JS this Keyword JS Style Guide JS Best Practices JS Mistakes JS Performance JS Reserved Words JS Versions JS Version ES5 JS Version ES6 JS JSON

JS Forms

JS Forms Forms API

JS Objects

Object Definitions Object Properties Object Methods Object Constructors Object Prototypes

JS Functions

Function Definitions Function Parameters Function Invocation Function Call Function Apply Function Closures

JS HTML DOM

DOM Intro DOM Methods DOM Document DOM Elements DOM HTML DOM CSS DOM Animations DOM Events DOM Event Listener DOM Navigation DOM Nodes DOM Collections DOM Node Lists

JS Browser BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS AJAX

AJAX Intro AJAX XMLHttp AJAX Request AJAX Response AJAX XML File AJAX PHP AJAX ASP AJAX Database AJAX Applications

JS JSON

JSON Intro JSON Syntax JSON vs XML JSON Data Types JSON Objects JSON Arrays JSON Parse JSON Stringify JSON PHP JSON HTML JSON JSONP

JS References

JavaScript Objects HTML DOM Objects


JavaScript Cookies


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


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

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

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

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

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

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

username = John Doe

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

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


Создание файла cookie с помощью JavaScript

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

С помощью JavaScript можно создать файл cookie так:

document.cookie = "username=John Doe";

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

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

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

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";


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

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

var x = document.cookie;

Document. cookie будет возвращать все куки в одной строке так же, как: кукие1 = value; кукие2 = значение; кукие3 = значение;


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

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

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Старый файл cookie перезаписывается.


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

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

При удалении файла cookie не требуется указывать значение файла cookie.

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

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, вы получите что-то вроде:

кукие1 = значение; кукие2 = значение;

     

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


Пример печенья JavaScript

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

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

Функция задает файл 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 "";
}

Функция объяснила:

Возьмите кукиенаме как параметр (CNAME).

Создайте переменную (Name) с искомым текстом (CNAME + "=").

Расшифровка строки cookie для обработки файлов cookie со специальными символами, например ' $ '

Разделите Document. cookie на точки с запятой в массив с именем CA (CA = декодедкукие. Split ('; ')).

Цикл через массив ЦС (i = 0; i <CA. Длина; i + +) и считывание каждого значения c = CA [i]).

Если файл cookie найден (c. IndexOf (Name) = = 0), верните значение файла cookie (c. подстрока (Name. length, c. length).

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


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

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

Если файл cookie установлен, он отобразит приветствие.

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

Пример

function checkCookie() {
    var username = getCookie("username");
    if (username != "") {
        alert("Welcome again " + username);
    } else {
        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);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

В приведенном выше примере выполняется функция чекккукие () при загрузке страницы.