Запись в куки

Тема в разделе "Веб-дизайн", создана пользователем Damasc, 10 фев 2011.

Модераторы: zek24
  1. Damasc

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6
    На сайте стоит следующий код:
    HTML:
    <div style="position: fixed; bottom: 1px; right: 1px;">
    <div id="chat" style="display: none;">
    <table style="border: 1px solid rgb(199, 185, 148); background: none repeat scroll 0% 0% rgb(101, 89, 84);" border="0" cellpadding="0" cellspacing="0" width="230">
    <tbody><tr><td style="background: none repeat scroll 0% 0% rgb(101, 89, 84); text-align: center; border-top: 1px solid rgb(199, 185, 148);">
    <!-- BEGIN CBOX - www.cbox.ws - v001 -->
    <div id="cboxdiv" style="text-align: center; line-height: 0">
    <div><iframe frameborder="0" width="227" height="315" src="http://www4.cbox.ws/box/?boxid=3885086&amp;boxtag=5647yb&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#ababab 1px solid;" id="cboxmain"></iframe></div>
    <div><iframe frameborder="0" width="227" height="75" src="http://www4.cbox.ws/box/?boxid=3885086&amp;boxtag=5647yb&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px" id="cboxform"></iframe></div>
    </div>
    <!-- END CBOX -->
    </td></tr></tbody></table>
    </div>
    <div style="height: 22px; width: 229px; border: 1px solid rgb(199, 185, 148); background: none repeat scroll 0% 0% rgb(101, 89, 84); margin-top: 1px;">
    <div style="float: right; height: 18px; width: 48px; border-left: 1px solid rgb(199, 185, 148); text-align: center; padding-top: 4px;"><font color="gray"><span class="xml-text">{date}</span></font></div>
    <div style="float: left; padding-top: 3px;">
    </div>
    <div style="margin-top: 4px; text-align: center;"><a href="javascript://" onclick="$('#chat').slideToggle(2000)"><img src="{THEME}/images/mini-chat.png" title="Мини чат" border="0" height="15" width="100"></a></div>
    </div> </div>
    
    Это мини чат, похожий на чат фейсбука. Хочу сделать запись в куки браузера при открытия чата. Нужно чтобы после обновления странички чат оставался открытым (если его открыли естественно).
    Запись в куки видел на сайте _dirvideo.com (смотрите блок "Опрос на сайте")
    _dirvideo.com/templates/dirvideo_v3/js/cookie.js - записывает в куки.
    Можно это прикрутить к моему чату?
     
  2. Djutan

    Djutan Создатель

    Регистр.:
    29 янв 2011
    Сообщения:
    21
    Симпатии:
    8
    Подключаешь .js файл с такими функциями:
    Для установики куки:
    HTML:
    function setCookie(name, value) { 
          var valueEscaped = escape(value); 
          var expiresDate = new Date(); 
          expiresDate.setTime(expiresDate.getTime() + 365 * 24 * 60 * 60 * 1000); // срок хранения куки, устанавливается в милисекундах, в данном случае установлена на 1 год 
          var expires = expiresDate.toGMTString(); 
          var newCookie = name + "=" + valueEscaped + "; path=/; expires=" + expires; 
          if (valueEscaped.length <= 4000) document.cookie = newCookie + ";"; 
    } 
    Для чтения куки:
    HTML:
    function getCookie(name) { 
          var prefix = name + "="; 
          var cookieStartIndex = document.cookie.indexOf(prefix); 
          if (cookieStartIndex == -1) return null; 
          var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length); 
          if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length; 
          return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex)); 
    }
     
    Damasc нравится это.
  3. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    781
    Симпатии:
    153
    в раздел по программированию. ага)
     
  4. Damasc

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6
    Не получилось по вашему способу.

    Кто подскажет более подробно? На основе _dirvideo.com/templates/dirvideo_v3/js/cookie.js можно сделать это? На этом сайте работает превосходно, только применить это чате мне не удалось.
     
  5. p1kka

    p1kka Постоялец

    Регистр.:
    12 авг 2009
    Сообщения:
    75
    Симпатии:
    22
    Damasc нравится это.
  6. Damasc

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6
    Скачал, посмотрел. Так и не понял как им воспользоваться. Файлик README пуст, а в файле test.html я так и не понял как должен работать скрипт и как его там можно протестировать.
     
  7. Djutan

    Djutan Создатель

    Регистр.:
    29 янв 2011
    Сообщения:
    21
    Симпатии:
    8
    Так у вас ничего не получится никаким способом. Нужно еще подключить голову. Это я не в плане нравоучений говорю, а хочу чтобы вы поняли - не заработает если бездумно "что то" "откуда то" скопировать и "куда то вставить".
    В первом посте я вам написал 2 рабочие функции. Вам нужно разобраться, как через них происходит обращение к кукам. Ниже привожу готовую страницу с "песочницей". Разберитесь по коду, как там исполюзуются эти функции, ничего сложного там нет.
    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"><!--
    function setCookie(name, value) { 
          var valueEscaped = escape(value); 
          var expiresDate = new Date(); 
          expiresDate.setTime(expiresDate.getTime() + 2* 60 * 1000); // 365 * 24 * 60 * 60 * 1000 срок хранения куки, устанавливается в милисекундах, в данном случае установлена на 2 минуты 
          var expires = expiresDate.toGMTString(); 
          var newCookie = name + "=" + valueEscaped + "; path=/; expires=" + expires; 
          if (valueEscaped.length <= 4000) document.cookie = newCookie + ";";
    }
    function getCookie(name) { 
          var prefix = name + "="; 
          var cookieStartIndex = document.cookie.indexOf(prefix); 
          if (cookieStartIndex == -1) return null; 
          var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length); 
          if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length; 
          return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex)); 
    }
    function generate_set_cook() {
    	elem_name = document.getElementById("cook_name").value;
    	elem_value = document.getElementById("cook_value").value;
    	elem_time = document.getElementById("cook_time").value;
    	setCookie(elem_name, elem_value);
    	alert("Кука "+elem_name+" установлена!");
    }
    function generate_get_cook() {
    	result_name_elem = document.getElementById("result_name").value;
    	if (result_name_elem == '') {
    		alert("НЕ ЗАДАНО ИМЯ ПОЛУЧАЕМОЙ КУКИ!");
    		return;
    	}
    	result_value_elem = document.getElementById("result_value");
    	cookie = getCookie(result_name_elem);
    	if(cookie == null){
    		alert("Кука с таким именем не установлена, \n возможно истекло время жизни.");
    		return;
    	}
    	result_value_elem.value = cookie;
    	alert(cookie);
    }
    //--></script>
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0;
    	padding: 0;
    }
    body {
    	background:#fff;
    	color:#000;
    	font-family:arial,sans-serif;
    	font-size:10px;
    }
    form {
    	margin: 0;
    	padding: 0;
    }
    .wrap {
    	height:100%;
    	text-align: center;
    }
    .sform {
    	display: inline-block;
    	display: inline !ie;
    	border: 1px solid #DDD;
    	background-color: #EEE;
    	padding: 10px 10px 0 10px;
    	text-align: left;
    	zoom:1;
    }
    	.set_cook {
    		display: inline !ie;
    		padding-bottom: 10px;
    		vertical-align: bottom;
    		zoom:1;
    	}
    		.input_feeld {
    			float: left;
    			padding-right: 10px;
    		}
    		input.action {
    			background: #bbb;
    		}
    		input#cook_time {
    			background: #eee;
    		}
    .sform div {
    	margin: 0px;
    	text-align: left;
    }
    .sform div span {
    	padding-right: 0px;
    }
    .sform a {
    	text-decoration: none;
    	color: #000;
    	text-decoration: none;
    	border-bottom: 1px dotted #000;
    }
    input {
    	background: #ddd;
    	border: 1px solid #DDD;
    	color: #666;
    }
    input.text {
    	background: #fff;
    }
    .helper {
    	display:-moz-inline-box; 
    	display:inline-block; 
    	height:100%; 
    	vertical-align:middle; 
    	zoom:1; 
    	display:inline !ie;
    }
    .clearfix:after {       
        clear: both;
        display: block;
        visibility: hidden;
        height: 0;
        content: ".";
        line-height: 0;
        font-size: 0;
    }
    .clearfix {
        *zoom: 1; 
        _height: 1%; 
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    	<div class="sform">
    			<div class="set_cook clearfix">
    				<div class="input_feeld">
    					<div><span>Имя куки</span></div>
    					<input type="text" name="cook_name"  maxlength="10" size="10" value="My_cook" class="text" id="cook_name"> 
    				</div>
    				<div class="input_feeld">
    					<div><span>Значение куки</span></div>
    					<input type="text" name="cook_value"  maxlength="10" size="10" value="100$" class="text" id="cook_value"> 
    				</div>
    				<div class="input_feeld">
    					<div><span>Время жизни (мин.)</span></div>
    					<input type="text" name="cook_time"  maxlength="10" size="10" value="2" class="text" disabled id="cook_time"> 
    				</div>
    				<input type="button" value="Установить куку" onclick="generate_set_cook();" class="action">
    			</div>
    			<!--[if IE]><br/><![endif]-->
    			<div class="set_cook clearfix">
    				<div class="input_feeld">
    					<div><span>Имя куки</span></div>
    					<input type="text" name="result_name"  maxlength="10" size="10" value="" class="text" id="result_name"> 
    				</div>
    				<div class="input_feeld">
    					<div><span>Значение куки</span></div>
    					<input type="text" name="result_value"  maxlength="10" size="10" value="" class="text" id="result_value"> 
    				</div>
    				<input type="button" value="Получить куку" onclick="generate_get_cook();" class="action">
    			</div>
    	</div>
    	<div class="helper"></div>
    </div>
    </body>
    </html>
     
    Damasc нравится это.
  8. Damasc

    Damasc

    Регистр.:
    5 мар 2009
    Сообщения:
    173
    Симпатии:
    6
    >На примере всё понятно, не могу понять каким образом это можно использовать в моём случае?

    Я так понимаю никто не знает как это сделать?