1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>cookie用法（例子）</title> 6 </head> 7 <script type="text/javascript"> 8 //设置cookie 9 function setCookie(key,value,time){ 10 var oDate=new Date(); 11 oDate.setDate(oDate.getDate()+time); 12 document.cookie=key+'='+encodeURI(value)+';expires='+oDate.toGMTString(); 13 } 14 //读取cookie 15 function getCookie(key){ 16 var arrCookie=document.cookie.split('; '); 17 for(var i=0;i<arrCookie.length;i++){ 18 var arrCookieSigle=arrCookie[i].split('='); 19 if(arrCookieSigle[0]==key){ 20 return decodeURI(arrCookieSigle[1]); 21 } 22 } 23 } 24 //删除cookie 25 function removeCookie(key){ 26 //设置删除cookie的值过期 27 setCookie(key,'',-1); 28 } 29 //一个例子的tab选项卡 30 //目的：利用cookie存储，页面关闭时候的第几项（项数）； 31 function tabSwitch(objDom,sClass,options){ 32 var objDom=document.getElementById(objDom); 33 var sClass=sClass; 34 35 var oNum=options; 36 37 var oLi=objDom.getElementsByTagName('li'); 38 var oDiv=objDom.getElementsByTagName('div'); 39 oLi[oNum].className=sClass; 40 oDiv[oNum].style.display='block'; 41 42 for(var i=0;i<oLi.length;i++){ 43 oLi[i].index=i; 44 oLi[i].onmouseover=function(){ 45 for(var i=0;i<oLi.length;i++){ 46 oLi[i].className=''; 47 oDiv[i].style.display='none'; 48 } 49 this.className=sClass; 50 oDiv[this.index].style.display='block'; 51 } 52 } 53 } 54 //页面加载时看cookie里是否有liPos这个cookie值，如果有则把选项卡，设置成cookie里存储的那一项 55 window.onload=function(){ 56 if(getCookie('liPos')!=undefined){ 57 var pos=parseInt(getCookie('liPos')); 58 tabSwitch('tabSwitch','active',pos); 59 }else{ 60 tabSwitch('tabSwitch','active',0); 61 } 62 63 64 65 } 66 //页面关闭时候存储项数到cookie里 67 window.onbeforeunload=function(){ 68 var oLi=document.getElementById('tabSwitch').getElementsByTagName('li'); 69 function getPos(){ 70 for(var i=0;i<oLi.length;i++){ 71 oLi[i].pos=i; 72 if(oLi[i].className=='active'){ 73 return oLi[i].pos; 74 } 75 } 76 } 77 var pos=getPos(); 78 setCookie('liPos',pos,5); 79 80 }; 81 </script> 82 <!--选项卡样式--> 83 <style> 84 *{margin:0px;padding:0px;} 85 .tabSwitch{width:800px; 86 margin:10px auto; 87 } 88 ul li{list-style: none; 89 width:100px; 90 height:30px; 91 line-height: 30px; 92 float:left; 93 background:#000; 94 color:#fff; 95 text-align: center; 96 cursor: pointer; 97 } 98 ul .active{width:98px;height:28px;background: #fff;border:1px solid #000;color:#000;line-height: 28px;} 99 .box{width:300px;border:1px solid #000;padding:20px;display:none;clear:both;} 100 </style> 101 <!--页面布局--> 102 <body> 103 <div id="content"></div> 104 <div class="tabSwitch" id="tabSwitch"> 105 <ul> 106 <li>1</li> 107 <li>2</li> 108 <li>3</li> 109 </ul> 110 <div class="box">; 111 112 1.新添加一个会话 cookie： 113 114 $.cookie('the_cookie', 'the_value'); 115 116 注：当没有指明 cookie有效时间时，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 117 118 “会话cookie（session cookie）”。 119 120 2.创建一个cookie并设置有效时间为 7天: 121 122 $.cookie('the_cookie', 'the_value', { expires: 7 }); 123 124 注：当指明了cookie有效时间时，所创建的cookie被称为“持久 cookie （persistent cookie）”。 125 126 3.创建一个cookie并设置 cookie的有效路径： 127 128 $.cookie('the_cookie', 'the_value', { expires: 7, path: '/' }); 129 </div> 130 <div class="box"> 131 132 4.读取cookie： 133 134 $.cookie('the_cookie'); // cookie存在 => 'the_value' 135 136 $.cookie('not_existing'); // cookie不存在 => null 137 138 5.删除cookie，通过传递null作为cookie的值即可： 139 140 $.cookie('the_cookie', null); 141 </div> 142 <div class="box"> 143 144 默认情况：只有设置cookie的网页才能读取该cookie。 145 146 定义cookie的有效路径。默认情况下， 该参数的值为创建 cookie 的网页所在路径（标准浏览器的行为） 。 147 148 如果你想在整个网站中访问这个cookie需要这样设置有效路径：path: '/'。如果你想删除一个定义 149 150 了有效路径的 cookie，你需要在调用函数时包含这个路径:$.cookie('the_cookie', null, 151 152 { path: '/' });。 domain: 'example.com' 153 </div> 154 </div> 155 </body> 156 157 </html>