Веб-программирование

Обучение программированию

Делаете первые шаги в программировании? Представляем вашему вниманию пошаговое обучение самостоятельного создания сайтов любой сложности на примерах! На страницах сайта KobRU вы найдете все самое необходимое, для того чтобы по праву считаться веб-мастером по созданию привлекательных динамически изменяемых интернет-страниц, используя основные инструменты веб-разработчиков: HTML; CSS; PHP; MySQL; JAVASCRIPT и другие. Сайт KobRU - наиболее полное и качественно структурированное руководство с предельно понятными пояснениями и поэтапным изложением материала, который поможет вам в совершенстве овладеть искусством программирования. Добавьте динамики и интерактивность в свои веб-проекты!

Вход в личный кабинет

Забыли пароль?

Не зарегистрированны?


Конструкторское Web-бюро
11.07 Работа с cookie javascript

Автор: Denisido

Дата: 2011-01-21

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

Сохранение данных на клиентском компьютере

Запоминание информации на клиентском компьютере - это использование cookie набора, т.е. небольшого (значение не превышающего 4 Кб) фрагмента данных в файле, сохраняемый браузером пользователя. Такой куки может содержать в себе любые данные, которые можно преобразовать в строковый формат. Сохраненный cookie доступен каждой Web-странице, хранящейся в одной папке Web-сервера и всех вложенных в нее папках. Поиск необходимого cookie происходит автоматически. На cookie налагаются некоторые ограничения:
- хранящиеся данные не должны превышать 4 Кб;
- максимумальное количество на 1 домен не более 20 cookie;
- максимальная допустимая норма в памяти браузера 300 cookie

Атрибуты cookie

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

Имя значение cookie

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

Дата хранения cookie

Конечная дата, до которой будет храниться cookie. Такая дата задается в строковом формате и по Гринвичу (метод toGMTString() объекта Date). Сессийные cookie существуют до того момента, пока вы не закроете браузер. В данном случае значение можно опустить.

Путь

Доступ к cookie страницам, сохраненных в корневой или вложенных папках.

Домен/Хост

Необязательный параметр. Указывается в основном когда необходимо дать доступ к cookie страницам, хранящихся на иных Web-серверах.

Безопастность

Указывается в основном только в том случае, если используется защищенное соединение по протоколу HTTPS.

Установка cookie

// работа с cookie javascript
  
function setCookie(cookieName, cookieValue, cookieExpire) 	{
								return true;
								}; // end setCookie func

В нашем случае функция setCookie() принимает 3 параметра: имя; инициализируемое значение и дату истечения срока действия куки. Если все в полном порядке, возвращаем true. Далее прописываем условия для двух первых параметров. Если таковые не указаны, то возвращаем false.

// работа с cookie javascrip
  
function setCookie(cookieName, cookieValue, cookieExpire) 	{
								if(!cookieName || !cookieValue) {
												return false;
												}; // end if
								return true;
								}; // end setCookie func

Для третьего параметра прописываем условие в виде тернарного оператора, в зависимости от того, был ли передан этот параметр или нет.

// работа с cookie javascript
  
function setCookie(cookieName, cookieValue, cookieExpire) 	{
								if(!cookieName || !cookieValue) {
												return false;
												}; // end if
								var cookieDate = cookieExpire ? new Date(cookieExpire) : new Date();
								return true;
								}; // end setCookie func

Установливаем саму куку.

// работа с cookie javascript
  
function setCookie(cookieName, cookieValue, cookieExpire) 	{
								if(!cookieName || !cookieValue) {
												return false;
												}; // end if
								var cookieDate = cookieExpire ? new Date(cookieExpire) : new Date();
								cookieValue = escape(cookieValue.toString());
								document.cookie = cookieName+'='+cookieValue+'; expires='+ cookieDate.toGMTString() + '; path=/';
								return true;
								}; // end setCookie func

Удаление cookie

Создаем функцию delCookie с единственным параметром

// работа с cookie javascript
  
function delCookie(cookieName)	{             
				return true; // если удаление прошло успешно возвращаем ПРАВДУ
				}; // end delCookie func

Прописываем условие, если не был передан единственный параметр, то возвращаем ЛОЖЬ.

// работа с cookie javascript
  
function delCookie(cookieName)	{
				if(!cookieName) {
						return false;
						}; // end if
				return true;
				}; // end delCookie func

Прописываем срок годности cookie до настоящего момента, т.е. прошедшим временем. В нашем случае - 01.01.1970г.

// работа с cookie javascript
  
function delCookie(cookieName)	{
				if(!cookieName) {
						return false;
						}; // end if
				var cookieDate = new Date('01/01/1970');
				document.cookie = cookieName+'=""; expires='+ cookieDate.toGMTString() + '; path=/';
				return true;
				}; // end delCookie func

Чтение cookie

Создаем функцию getCookie с единственным параметром, позволяющую вытащить из куки набора интересующий нас элемент.

// работа с cookie javascript
  
function getCookie(cookieName)	{
				if(!cookieName)	{ 
						return false;
						}; // end if

				return false;
				}; // end getCookie func

Далее получаем массив куки набора:

// работа с cookie javascript
  
function getCookie(cookieName)	{
				if(!cookieName)	{
						return false;
						}; // end if
				var cookieArray = document.cookie.split('; ');
				return false;
				}; // end getCookie func

Теперь в цикле производим сравнительные действия. В теле цикла создаем новую переменную name_valueCookie и проинициализируем ее значением cookieArray с item элементом данного масива, разбивая его знаком равенства методом split('='), чтобы отделить имена кук от их значений. В нулевом элементе хранится имя куки, в первом - ее значение:

// работа с cookie javascript
  
function getCookie(cookieName)	{
				if(!cookieName)	{
						return false;
						}; // end if
				var cookieArray = document.cookie.split('; ');
				for(var i = 0; i < cookieArray.length; i++) 	{
										var name_valueCookie = cookieArray[i].split('=');
										if(name_valueCookie[0] == cookieName) 	{
															return unescape(name_valueCookie[1]);
															}; // end if
										}; // end for
				return false;
				}; // end getCookie func

Примеры javascript

Первый пример с использованием библиотеки jQuery - перемещение элементов с запоминанием :

Запустить!
// работа с cookie javascript
  
$(function() {

function setCookie(cookieName, cookieValue, cookieExpire) 	{
								if(!cookieName || !cookieValue) {
												return false;
												}; // end if
								var cookieDate = cookieExpire ? new Date(cookieExpire) : new Date();
								cookieValue = escape(cookieValue.toString());
								document.cookie = cookieName+'='+cookieValue+'; expires='+ cookieDate.toGMTString() + '; path=/';
								return true;
								}; // end setCookie func

function delCookie(cookieName)	{
				if(!cookieName) {
						return false;
						}; // end if
				var cookieDate = new Date('01/01/1970');
				document.cookie = cookieName+'=""; expires='+ cookieDate.toGMTString() + '; path=/';
				return true;
				}; // end delCookie func

function getCookie(cookieName)	{
				if(!cookieName)	{
						return false;
						}; // end if
				var cookieArray = document.cookie.split('; ');
				for(var i = 0; i < cookieArray.length; i++) 	{
										var name_valueCookie = cookieArray[i].split('=');
										if(name_valueCookie[0] == cookieName) 	{
															return unescape(name_valueCookie[1]);
															}; // end if
										}; // end for
				return false;
				}; // end getCookie func













var flag = 0;

		$('#KobRU_mainDiv').mousedown(function()  	{
								flag = 1;
								flagFunc();
								$(this).css({'cursor':'move'});
								}); // end 
		$('#KobRU_mainDiv').mouseup(function()  	{
								flag = 0;
								flagFunc();
								$(this).css({'cursor':'default'});
								}); // end
function flagFunc() {
				if(flag == 1) 	{
						$('#p1').html('флаг=1');

						var objDiv = $('#KobRU_mainDiv');
						objDiv.bind('mousemove',function(evt) 	{
										var x = evt.pageX;
										var y = evt.pageY;
										$(this).css({'left':x-100+'px','top':y-100+'px'});
										if(flag == 0)	{
												$(this).unbind('mousemove');
            											return;
												}; // end if flag
										}); // end mousemove
						}
				else		{
						$('#p1').html('флаг=0');
						var x = $('#KobRU_mainDiv').css('left');
						var y = $('#KobRU_mainDiv').css('top');
						$('#KobRU_mainDiv').css({'left':x,'top':y});
						var today = new Date();
						var NNY = today.getFullYear()+1;
						var nextYear =  new Date(NNY,0,1);
						setCookie('positionx',x, nextYear);
						setCookie('positiony',y, nextYear);
						}; // end if else flag
}; // end func flag


var valx = getCookie('positionx');
var valy = getCookie('positiony');
$('#KobRU_mainDiv').css({'left':valx,'top':valy}).fadeIn(400);


}); // end ready

Второй пример с использованием библиотеки jQuery - перемещение элементов с запоминанием :

Запустить!
// работа с cookie javascript
  
$(function() {

function setCookie(cookieName, cookieValue, cookieExpire) 	{
								if(!cookieName || !cookieValue) {
												return false;
												}; // end if
								var cookieDate = cookieExpire ? new Date(cookieExpire) : new Date();
								cookieValue = escape(cookieValue.toString());
								document.cookie = cookieName+'='+cookieValue+'; expires='+ cookieDate.toGMTString() + '; path=/';
								return true;
								}; // end setCookie func

function delCookie(cookieName)	{
				if(!cookieName) {
						return false;
						}; // end if
				var cookieDate = new Date('01/01/1970');
				document.cookie = cookieName+'=""; expires='+ cookieDate.toGMTString() + '; path=/';
				return true;
				}; // end delCookie func

function getCookie(cookieName)	{
				if(!cookieName)	{
						return false;
						}; // end if
				var cookieArray = document.cookie.split('; ');
				for(var i = 0; i < cookieArray.length; i++) 	{
										var name_valueCookie = cookieArray[i].split('=');
										if(name_valueCookie[0] == cookieName) 	{
															return unescape(name_valueCookie[1]);
															}; // end if
										}; // end for
				return false;
				}; // end getCookie func



				$('#KobRU_mainDiv').draggable();
				$('#KobRU_mainDiv').mouseup(function() {
									var x = $(this).css('left');
									var y = $(this).css('top');
									var today = new Date();
									var NNY = today.getFullYear()+1;
									var nextYear =  new Date(NNY,0,1);
									setCookie('positionx',x, nextYear);
									setCookie('positiony',y, nextYear);
									});
var valx = getCookie('positionx');
var valy = getCookie('positiony');
$('#KobRU_mainDiv').css({'left':valx,'top':valy});


}); // end ready



Оцените материал по 5-ти бальной шкале: 1 2 3 4 5



Коментарии:

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

Текст коментария:

Введите результат с картинки

Просмотров: 16434

Метки раздела JavaScript

Основы web программирования, var javascript, javascript функции, javascript обучение, javascript простые примеры, html javascript, javascript примеры, javascript random, уроки сайтостроения, java script, регулярные выражения, appendchild javascript, javascript бесплатно, javascript document write, javascript справочник, javascript примеры.