Как Установить и получить cookie с помощью JavaScript
Для работы нам понадобятся две функции: получение и установка cookie
Функция установки cookie
function set_cookie(name, value, expires) { if (!expires) { expires = new Date(); } document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString() + "; path=/"; }
Функция получения cookie
function get_cookie(name) { cookie_name = name + "="; cookie_length = document.cookie.length; cookie_begin = 0; while (cookie_begin < cookie_length) { value_begin = cookie_begin + cookie_name.length; if (document.cookie.substring(cookie_begin, value_begin) == cookie_name) { var value_end = document.cookie.indexOf (";", value_begin); if (value_end == -1) { value_end = cookie_length; } return unescape(document.cookie.substring(value_begin, value_end)); } cookie_begin = document.cookie.indexOf(" ", cookie_begin) + 1; if (cookie_begin == 0) { break; } } return null; }
Пример установки и получения
В примере нажав на ссылку "Установка" записываем в браузер cookie. Делаем это с помощью вот такой функции:
function save_cookie() { var name = "example" // имя cookie var tmp = "Привет, я ваша cookie!"; // записываемое значение expires = new Date(); // получаем текущую дату expires.setTime(expires.getTime() + (1000 * 86400 * 365)); // вычисляем срок хранения cookie set_cookie(name, tmp, expires); // устанавливаем cookie с помощью функции set_cookie }
Вызов этой функции в html:
<a href="javascript:save_cookie();">Установка</a>
Чтобы прочитать cookie, воспользуемся функцией get_cookie() и для наглядности запишем полученное значение в html-слой. Делаем это с помощью такой функции:
function write_cookie() { // получаем cookie и записываем значение в слой layer с помощью innerHTML document.getElementById('layer').innerHTML = get_cookie('example'); }
Вызов этой функции в html:
<a href="javascript:write_cookie();">Чтение</a>
// слой, в котором показываем значение cookie
<div id="layer" style="padding:5px;"></div>
Пример сохранения и получение массива
Установка и получение cookie аналогичны рассмотренным в предыдущем примере, с той лишь разницей, что перед чтением и сохранением необходимо обработать массив.
Получаем значения и записываем в cookie с помощью функции save_array():
function save_array() { var myArray = [1, 2, "привет"]; // массив со значениями var tmp = ""; if (myArray != null) { // проходимся по массиву, собирая значения в переменную и разделяя их запятой for (i in myArray) { if (myArray[i] != "") { tmp = tmp + myArray[i]; if (i != myArray.length-1) { tmp = tmp + ","; } } } } expires = new Date(); // получаем текущую дату expires.setTime(expires.getTime() + (1000 * 86400 * 365)); // вычисляем срок хранения cookie set_cookie("example", tmp, expires); // устанавливаем cookie с помощью функции set_cookie }
Вызов этой функции в html:
<a href="javascript:save_array();">Установка</a>
Читаем значение cookie и выводим в html-слой
function write_array() { var getmyArray = get_cookie('example'); // читаем значение cookie var tmp = ''; getmyArray = getmyArray.split(",") // разбираем значение, помещяя его в массив for (i=0; i<getmyArray.length; i++) // проходимся по массиву и форматируем его для вывода { tmp += getmyArray[i]; if (i != getmyArray.length) { tmp += "<br /7>"; } } // выводим массив в слой с индентификатором layer2 document.getElementById('layer2').innerHTML = tmp; }
Вызов этой функции в html:
<a href="javascript:write_array();">Распечатать массив</a>
// слой, в котором показываем значение cookie
<div id="layer2" style="padding:5px;"></div>
Created/Updated: 25.05.2018