JavaScript DHTML/YUI Library/Cookie

Материал из Web эксперт
Перейти к: навигация, поиск

Cookie Utility

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

 <title>YUI Library Examples: Cookie Utility: Advanced Cookie Example</title>
   
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style> /*Supplemental CSS for the YUI distribution*/

  1. custom-doc { width: 95%; min-width: 950px; }
  2. pagetitle {background-image: url(../../assets/bg_hd.gif);}
  3. pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}

</style> <link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/logger/assets/skins/sam/logger.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yuiloader/yuiloader-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/event/event-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dom/dom-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/logger/logger-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/cookie/cookie-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>


<script type="text/javascript"> //enable passthrough of errors from YUI Event: if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {

 YAHOO.util.Event.throwErrors = true;

} </script> </head> <body id="yahoo-com" class=" yui-skin-sam">

<a href="http://developer.yahoo.ru/yui/">YUI Library Home</a>

   <form action="http://search.yahoo.ru/search" id="sitesearchform">
   <input name="vs" type="hidden" value="developer.yahoo.ru">
   <input name="vs" type="hidden" value="yuiblog.ru">
     <label for="searchinput">Site Search (YDN & YUIBlog): </label>
     <input type="text" id="searchinput" name="p">
     <input type="submit" value="Search" id="searchsubmit" class="ygbt">
</form>
<a href="../../"><img src="../../assets/yui.gif" border="0" height="38"></a>

YUI Library Examples: Cookie Utility: Advanced Cookie Example

Cookie Utility: Advanced Cookie Example

This example shows how to get, set, and remove cookies using the YUI Cookie utility.



Note:

Keep an eye on the Logger console at right to view the log messages associated with this example.

Click the buttons to interact with the cookie:

<input type="button" value="Get Value" id="yui-cookie-btn1" /> <input type="button" value="Set Random Value" id="yui-cookie-btn2" /> <input type="button" value="Remove 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("example");
       alert(value);
       YAHOO.log("Cookie "example" has a value of "" + value + """);
   });
   YAHOO.util.Event.on("yui-cookie-btn2", "click", function(){
       var newValue = "yui" + Math.round(Math.random() * Math.PI * 1000);
       YAHOO.util.Cookie.set("example", newValue);
       YAHOO.log("Set cookie "example" to "" + newValue + """);
   });
   YAHOO.util.Event.on("yui-cookie-btn3", "click", function(){
       YAHOO.util.Cookie.remove("example");
       YAHOO.log("Removed cookie "example".");
   });

})(); </script>



Advanced Cookie Example

This example consists of three buttons, each of which performs one of the basic cookie functions: getting a value, setting a value, and removing a value. The first button, "Get Value", retrieves the value of a cookie and displays it in an alert:

<textarea name="code" class="JScript" cols="60" rows="1"> YAHOO.util.Event.on("yui-cookie-btn1", "click", function(){

   var value = YAHOO.util.Cookie.get("example");
   alert(value);
   YAHOO.log("Cookie "example" has a value of "" + value + """);

}); </textarea>

The second button, "Set Random Value", creates a random value and sets the cookie"s value equal to it:

<textarea name="code" class="JScript" cols="60" rows="1"> YAHOO.util.Event.on("yui-cookie-btn2", "click", function(){

   var newValue = "yui" + Math.round(Math.random() * Math.PI * 1000);
   YAHOO.util.Cookie.set("example", newValue);
   YAHOO.log("Set cookie "example" to "" + newValue + """);

}); </textarea>

After clicking this button, you can go back and click "Get Value" to see the new value that was assigned to the cookie (you can also check the logger output).

The third button, "Remove Value", completely removes the cookie from the page:

<textarea name="code" class="JScript" cols="60" rows="1"> YAHOO.util.Event.on("yui-cookie-btn3", "click", function(){

   YAHOO.util.Cookie.remove("example");
   YAHOO.log("Removed cookie "example".");

}); </textarea>

When this button is clicked, it removes the cookie. If "Get Value" is clicked immediately afterwards, the value should be null.

</body> </html>


 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Cookie Utility: Simple Cookie Example

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

 <title>YUI Library Examples: Cookie Utility: Simple Cookie Example</title>
   
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style> /*Supplemental CSS for the YUI distribution*/

  1. custom-doc { width: 95%; min-width: 950px; }
  2. pagetitle {background-image: url(../../assets/bg_hd.gif);}
  3. pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}

</style> <link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/logger/assets/skins/sam/logger.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yuiloader/yuiloader-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/event/event-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dom/dom-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/logger/logger-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/cookie/cookie-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>


<script type="text/javascript"> //enable passthrough of errors from YUI Event: if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {

 YAHOO.util.Event.throwErrors = true;

} </script> </head> <body id="yahoo-com" class=" yui-skin-sam">

<a href="http://developer.yahoo.ru/yui/">YUI Library Home</a>

   <form action="http://search.yahoo.ru/search" id="sitesearchform">
   <input name="vs" type="hidden" value="developer.yahoo.ru">
   <input name="vs" type="hidden" value="yuiblog.ru">
     <label for="searchinput">Site Search (YDN & YUIBlog): </label>
     <input type="text" id="searchinput" name="p">
     <input type="submit" value="Search" id="searchsubmit" class="ygbt">
</form>
<a href="../../"><img src="../../assets/yui.gif" border="0" height="38"></a>

YUI Library Examples: Cookie Utility: Simple Cookie Example

Cookie Utility: Simple Cookie Example

This example shows basic usage of the YUI Cookie utility. The example checks the value of a cookie and then sets it to a new value.



Note:

Keep an eye on the Logger console at right to view the log messages associated with this example.

<script type="text/javascript"> (function(){

   var currentValue = YAHOO.util.Cookie.get("example");
   YAHOO.log("Cookie"s current value is "" + currentValue + """);
   var newValue = "yui" + Math.round(Math.random() * Math.PI * 1000);
   YAHOO.log("Setting cookie"s value to "" + newValue + """);
   YAHOO.util.Cookie.set("example", newValue);

})(); </script>



</body> </html>


 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Cookie Utility: Subcookie Example

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

 <title>YUI Library Examples: Cookie Utility: Subcookie Example</title>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/logger/assets/skins/sam/logger.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yuiloader/yuiloader-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/event/event-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dom/dom-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/logger/logger-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/cookie/cookie-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>


<script type="text/javascript"> //enable passthrough of errors from YUI Event: if ((typeof YAHOO !== "undefined") && (YAHOO.util) && (YAHOO.util.Event)) {

 YAHOO.util.Event.throwErrors = true;

} </script> </head> <body id="yahoo-com" class=" yui-skin-sam">

<a href="http://developer.yahoo.ru/yui/">YUI Library Home</a>

   <form action="http://search.yahoo.ru/search" id="sitesearchform">
   <input name="vs" type="hidden" value="developer.yahoo.ru">
   <input name="vs" type="hidden" value="yuiblog.ru">
     <label for="searchinput">Site Search (YDN & YUIBlog): </label>
     <input type="text" id="searchinput" name="p">
     <input type="submit" value="Search" id="searchsubmit" class="ygbt">
</form>
<a href="../../"><img src="../../assets/yui.gif" border="0" height="38"></a>

YUI Library Examples: Cookie Utility: Subcookie Example

Cookie Utility: Subcookie Example

This example shows how to get and set subcookies as well as using conversion functions when retrieving subcookie values.



Note:

Keep an eye on the Logger console at right to view the log messages associated with this example.

<script type="text/javascript"> (function(){

   var Cookie = YAHOO.util.Cookie;
   
   //get subcookie values
   var name = Cookie.getSub("example", "name");
   var today = Cookie.getSub("example", "today", function(value){
       return new Date(value);
   });
   var count = Cookie.getSub("example", "count", Number);
   YAHOO.log("The subcookie "name" is "" + name + ""(" + (typeof name) + ")");
   YAHOO.log("The subcookie "today" is "" + today + ""(" + (typeof today) + ")");
   YAHOO.log("The subcookie "count" is "" + count + ""(" + (typeof count) + ")");
      
   //set subcookie values
   Cookie.setSub("example", "name", "Yahoo!");
   Cookie.setSub("example", "today", (new Date()).toString());
   Cookie.setSub("example", "count", Math.round(Math.random() * 30));

})(); </script>



</body> </html>


 </source>
   
  
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>