Cookies

A cookie is a text string stored on your computer by your browser. When cookies are created they can have a future death date. Without such a future death date, cookies last just for the current web browsing session. Cookies with a future death date persist through time and thereby are a device for maintaining "state". Thus a website can appear to remember your choices from session to session.

Generally, a browser can store up to 300 cookies of 4k each and 20 cookies per server or domain.

Browsers can permit or deny cookies. Here is a screen grab of setting Firefox's options to permit cookies.

Click the buttons to interact with the cookie:

[This is a session cookie]

<script type="text/javascript" src="yuiloader-beta-min.js"></script>
<script type="text/javascript" src="event-min.js"></script>
<script type="text/javascript" src="cookie-beta-min.js"></script>
<script type="text/javascript" src="dom-min.js"></script>
<script type="text/javascript" src="element-beta-min.js"></script>
...
<body id="yahoo-com" class=" yui-skin-sam">
...
<input type="button" value="Get Cookie Value" id="yui-cookie-btn1" />
<input type="button" value="Set Cookie Value" id="yui-cookie-btn2" />
<input type="button" value="Remove Cookie Value" id="yui-cookie-btn3" />
...
<script type="text/javascript">
(function(){

    YAHOO.util.Event.on("yui-cookie-btn1", "click", function(){
      
        var value = YAHOO.util.Cookie.get("INFO343");		
        alert(value);
		       
    });

    YAHOO.util.Event.on("yui-cookie-btn2", "click", function(){        
        
        var newValue = prompt("Please enter your name","Caroline Candy");
        YAHOO.util.Cookie.set("INFO343", newValue);

    });

    YAHOO.util.Event.on("yui-cookie-btn3", "click", function(){
        YAHOO.util.Cookie.remove("INFO343");
       
    });


})();
</script>

This is an example of a persistent cookie.

To use: Drag the eagle to a new position. Press the button "Remember where I left the eagle". Close your browser. Re-open your browser and return to this page. The eagle should be where you left it.

Left Top

	
 <script type="text/javascript">
  
  window.onload=setEagleInitialPosition;
  
  function setEagleInitialPosition()
  {
	
	var valueLeft = YAHOO.util.Cookie.get("EagleLeft");
	var valueTop = YAHOO.util.Cookie.get("EagleTop");	
	
	if (valueLeft == null) { valueLeft = 0; }
	if (valueTop == null) { valueTop = 0; }	
	
	var b = document.getElementById("eaglePic");
	b.style.left = valueLeft + "px";
	b.style.top = valueTop + "px";
	var leftBox = document.getElementById("leftValue");
	   leftBox.value = valueLeft;
	var topBox = document.getElementById("topValue");
	   topBox.value = valueTop;
  }
  
  
  
    YAHOO.util.Event.on("eagleButton", "click", function(){        	
		
		var bird = document.getElementById("eaglePic");	
		var left = parseInt(bird.style.left);
		  var putLeft = document.getElementById("leftValue");
		  putLeft.value = left;
		var top = parseInt(bird.style.top);		
		  var putTop = document.getElementById("topValue");
		  putTop.value = top;	
		
        YAHOO.util.Cookie.set("EagleLeft", left, { expires: new Date("January 12, 2025") });
        YAHOO.util.Cookie.set("EagleTop", top, { expires: new Date("January 12, 2025") });
					
    }); 
  </script>  
	
	
	
  <script src="jquery-latest.js"></script>
  <script src="ui.core.js"></script>
  <script src="ui.draggable.js"></script>


  <script>
  $(document).ready(function(){
    $(".eagle").draggable({containment: "#container"});
  });
  </script>	
	
...

<input id="eagleButton" type="button" value="Remember where I left the eagle">
<span style="margin-left: 5px; margin-right: 5px">Left</span>
<input id="leftValue" type="input" style="border: solid thin black; width: 40px">
<span style="margin-left: 5px; margin-right: 5px">Top</span>
<input id="topValue" type="input" style="border: solid thin black; width: 40px">

<br><br>
<div id="container" style="height: 300px; width: 300px; background-color: yellow">
<img id="eaglePic" class="eagle" src="eagle.gif">
</div>