Как Установить и получить 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>