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>
时间： 2024-10-10 16:32:00