JavaScript и Cookie E-mail
Записи блога
Автор: Paul Blakmorg   
10.09.2011 02:09
AddThis Social Bookmark Button

CookieНедавно работал над одним сайтом и мне нужно было сохранить настройки пользователя не подключая скрипт к базе данных. Моей задачей было сделать следующее:

предоставить пользователю выбор в использовании формы добавления информации:

-ajax форма

-простая форма без использования javascript

Что бы не подключать скрипт к базе я решил использовать печеньки, то есть cookie.

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

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

А теперь, собственно, предоставлю вашему вниманию исходный код javascript'a устанавливающего  печеньки.

Для начала создадим функцию установки cookie:

function set_cookie(name, value, expires)
{
if (!expires)
{
expires = new Date();
}
document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString() +  "; path=/";
}

В кратце поясню что к чему, функция имеет 3 переменные: name - имя печеньки, value - значение, которое мы запишем в печеньку и expires - дата и время до которого будет храниться наша печенька.

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

Мы передаем функции в переменной name имя нашей печеньки и функция считывает значение из печеньки, сохраненной в браузере, и это значение можно будет присвоить переменной или отобразить на странице, но об этом ниже.

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

Простой пример установки и полученя cookie:

function save_cookie() {
 var name = "Simple-Cookie" // имя нашей печеньки
 var value = "Значение, которое мы сохранили в печеньку";
 expires = new Date(); // получаем дату в данный момент времени
 expires.setTime(expires.getTime() + (1000 * 86400 * 365)); // вычисляем срок хранения cookie
 set_cookie(name, value, expires); // устанавливаем cookie, вызвав из этой функции функцию set_cookie()
}

Теперь нам надо вызвать функцию save_cookie(), для этого мы будем использовать ссылку:

<a href="javascript:save_cookie();">Установить печеньку</a>

Все, печеньку мы установили, но нам надо же её еще и получить обратно, для этого используется функция get_cookie().

В примере я получу значение сохраненное в cookie  и отображу его на странице.

Для этого нам понадобится еще одна функция, она просто выводит значение в контейнер:

function read_cookie() {
  // получаем cookie и записываем значение в слой layer с помощью innerHTML
  document.getElementById('kontejner').innerHTML = get_cookie('Simple-Cookie');
}

И что бы вызвать эту функцию:

<a href="javascript:read_cookie();">Считать печеньку</a>

И контейнер для  вывода:

<div id="kontejner"></div>

Вместо a href="javascript: вы можете использовать вызов функции по onClick , например: <p onClick="function();">Вызвать</p>

А вот и рабочий пример:


Установить печеньку | Считать печеньку

 

Комментарии 

 
+1 # Человек 23.10.2011 17:21
Отличная статья, спасибо!
Ответить | Ответить с цитатой | Цитировать
 

Добавить комментарий


Защитный код
Обновить

Кто на сайте?

Сейчас 2 гостей онлайн

Paul Blakmorg  ©  2009-2012