Работа с cookies в jQuery и JavaScript

jquery-cookiesЯ не буду вдаваться в подробности, что из себя представляют cookies. Подробнее об этом вы сможете прочитать в википедии. Перейдем сразу к делу. Для начала, рассмотрим работу с cookies в JavaScript. Для этого напишем 3 простые функции: установки, получения и удаления cookies.


Установка cookies

В функцию установки cookies будут передаваться следующие параметры:

name – имя куки (обязательный параметр).

value – значение куки (необязательный параметр).

expires – дата, когда истекает срок действия куки (необязательный параметр).

path – устанавливает путь до куки (необязательный параметр).

domain – домен (необязательный параметр).

secure – указывает на то, что браузер должен использовать SSL, когда отсылает cookies серверу (необязательный параметр).

Обязательно нужно передать name, остальные параметры можно не трогать.

Функция установки cookies:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function set_cookie (name, value, expires_year, expires_month, expires_day, path, domain, secure)
{
	var cookie_string = name + "=" + escape(value);
	if (expires_year)
	{
		var expires = new Date (expires_year, expires_month, expires_day);
		cookie_string += "; expires=" + expires.toGMTString();
	}
 
	if (path)
	{
		cookie_string += "; path=" + escape(path);
	}
 
	if (domain)
	{
		cookie_string += "; domain=" + escape(domain);
	}
	if (secure)
	{
		cookie_string += "; secure";
	}
	document.cookie = cookie_string;
}

Получение cookies

Для получения куки необходимо знать ее имя, заранее установленное с помощью функции set_cookie().

Функция получения cookies:

1
2
3
4
5
6
7

function get_cookie (cookie_name)
{
	if (document.cookie)
		alert(document.cookie);
	else
		alert("Не удалось получить cookies");
}

Удаления cookies

Для удаления cookies, устанавливаем срок действия куки на 1 секунду назад, от текущего времени.

Функция удаления cookies:

1
2
3
4
5
6

function delete_cookie (cookie_name)
{
	var cookie_date = new Date (); 
	cookie_date.setTime (cookie_date.getTime() - 1);
	document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

Ниже приведен полный код примера.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<html>
<head>
<title>2Coders.ru</title>
</head>
<body>
<script language="JavaScript">
function set_cookie (name, value, expires_year, expires_month, expires_day, path, domain, secure)
{
	var cookie_string = name + "=" + escape (value);
	if (expires_year)
	{
		var expires = new Date (expires_year, expires_month, expires_day);
		cookie_string += "; expires=" + expires.toGMTString();
	}
 
	if (path)
	{
		cookie_string += "; path=" + escape(path);
	}
 
	if (domain)
	{
		cookie_string += "; domain=" + escape(domain);
	}
	if (secure)
	{
		cookie_string += "; secure";
	}
	document.cookie = cookie_string;
}
 
function delete_cookie (cookie_name)
{
	var cookie_date = new Date (); 
	cookie_date.setTime (cookie_date.getTime() - 1);
	document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}
 
function get_cookie (cookie_name)
{
	if (document.cookie)
		alert(document.cookie);
	else
		alert("Не удалось получить cookies");
}
</script>
<a href="javascript:set_cookie('2coders', 1)">Set Cookie</a>
<a href="javascript:get_cookie('2coders')">Get Cookie</a>
<a href="javascript:delete_cookie('2coders')">Delete Cookie</a>
</body>
</html>

Выше, мы рассмотрели работу с кукис в javascript, теперь давайте посмотрим, как это реализовано в jQuery. В jQuery нет встроенных методов для работы с cookies, поэтому приходится использовать сторонний плагин. Я покажу лишь некоторые функции данного плагина, а именно: установка, получение и удаление cookies. Подробнее с возможностями плагина, можно ознакомиться на сайте автора.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.cookie.js"></script>
<script>
    $(function() {
        var COOKIE_NAME = 'test_cookie';
        var options = { path: '/', expires: 10 };
 
        // установить cookie
        $('#setCookies').click(function() {
        $.cookie(COOKIE_NAME, '2coders.ru', options);
			return false;
         });
 
        // получить cookie
        $('#getCookies').click(function() {
            alert($.cookie(COOKIE_NAME));
            return false;
         });
 
        // удалить cookie
        $('#delCookies').click(function() {
            $.cookie(COOKIE_NAME, null, options);
            return false;
        });
    });
</script>
<a href="#" id="setCookies">Установить Cookie</a>
<a href="#" id="getCookies">Получить Cookie</a>
<a href="#" id="delCookies">Удалить Cookie</a>

Будьте внимательны при установке cookies, у пользователя может быть отключен javascript в браузере, в таком случае ваши cookies не установятся.

Теги: ,

Комментарии

  1. GrayD
    29 Август 2010 в 21:01

    Статья гуд, как раз хочу осваивать cookies в JS

    Reply

Оставить комментарий