浏览器应用cookie的例子

  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>