Cookie基础

Cookie，有时也用其复数形式Cookies，指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。定义于RFC2109（已废弃），最新取代的规范是RFC2965。

下面的代码可以返回设置的cookie，在火狐浏览器下，可以查看浏览器的所有cookie，并且可以进行管理。expires用来赋予过期时间。

1 <script>
2     var oDate=new Date();
3     oDate.setDate(oDate.getDate()+30);
4     document.cookie="user=paxster;expires="+oDate;
5     document.cookie="password=123456";
6     alert(document.cookie);
7 </script>

设置cookie函数

1 <script>
2     function setCookie(name,value,iDay)//第一个参数是cookie的名字，第二个是cookie的值，第三个是过期时间。
3     {
4         var oDate=new Date();
5         oDate.setDate(oDate.getDate()+iDay);//setDate是一个方法，可以设置时间，但是系统时间并不会改变
6         document.cookie=name+'='+value+';expires='+oDate;
7     };
8     setCookie('username','paxster',20);
9 </script>

 获取cookie函数

 1 function getCookie(name)//参数为cookie的名字
 2 {
 3     //'username=abc; password=123456; aaa=123; bbb=4r4er'
 4     var arr=document.cookie.split('; ');//把cookie的分号分割
 5     var i=0;
 6     
 7     //arr->['username=abc', 'password=123456', ...]
 8     
 9     for(i=0;i<arr.length;i++)
10     {
11         //arr2->['username', 'abc']
12         var arr2=arr[i].split('=');//再次分割，删除等号
13         
14         if(arr2[0]==name)
15         {
16             return arr2[1];//如果存在第一个值，那么返回后面的值
17         }
18     }
19     
20     return '';
21 }

删除cookie函数

1 function removeCookie(name)
2 {
3     setCookie(name, '1', -1);//把过期时间设置为-1，来删除cookie
4 }

用户名下次登录保存

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script>
 7 function setCookie(name, value, iDay)
 8 {
 9     var oDate=new Date();
10     
11     oDate.setDate(oDate.getDate()+iDay);
12     
13     document.cookie=name+'='+value+';expires='+oDate;
14 }
15 
16 function getCookie(name)
17 {
18     //'username=abc; password=123456; aaa=123; bbb=4r4er'
19     var arr=document.cookie.split('; ');
20     var i=0;
21     
22     //arr->['username=abc', 'password=123456', ...]
23     
24     for(i=0;i<arr.length;i++)
25     {
26         //arr2->['username', 'abc']
27         var arr2=arr[i].split('=');
28         
29         if(arr2[0]==name)
30         {
31             return arr2[1];
32         }
33     }
34     
35     return '';
36 }
37 
38 function removeCookie(name)
39 {
40     setCookie(name, '1', -1);
41 }
42 ------------------引入上面的三个函数---------------------------------------
43 window.onload=function ()
44 {
45     var oForm=document.getElementById('form1');
46     var oUser=document.getElementsByName('user')[0];
47     var oBtnClear=document.getElementsByTagName('a')[0];//获取元素
48     
49     oForm.onsubmit=function ()//保存cookie---表单的提交事件
50     {
51         setCookie('user', oUser.value, 30);
52     };
53     
54     oUser.value=getCookie('user');
55     
56     oBtnClear.onclick=function ()//删除cookie---a标记的单击事件
57     {
58         removeCookie('user');
59         oUser.value='';
60     };
61 };
62 </script>
63 </head>
64 
65 <body>
66 <form id="form1" action="http://www.miaov.com/">
67     用户名：<input type="text" name="user" />
68     密码：<input type="password" name="password" />
69     <input type="submit" value="登录" />
70     <a href="javascript:;">清除记录</a>
71 </form>
72 </body>
73 </html>

拖拽+cookie

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 #div1 {width:100px; height:100px; background:red; position:absolute;}
 6 </style>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 <title>无标题文档</title>
 9 <script>
10 function setCookie(name, value, iDay)
11 {
12     var oDate=new Date();
13     
14     oDate.setDate(oDate.getDate()+iDay);
15     
16     document.cookie=name+'='+value+';expires='+oDate;
17 }
18 
19 function getCookie(name)
20 {
21     //'username=abc; password=123456; aaa=123; bbb=4r4er'
22     var arr=document.cookie.split('; ');
23     var i=0;
24     
25     //arr->['username=abc', 'password=123456', ...]
26     
27     for(i=0;i<arr.length;i++)
28     {
29         //arr2->['username', 'abc']
30         var arr2=arr[i].split('=');
31         
32         if(arr2[0]==name)
33         {
34             return arr2[1];
35         }
36     }
37     
38     return '';
39 }
40 
41 function removeCookie(name)
42 {
43     setCookie(name, '1', -1);
44 }
45 
46 window.onload=function ()
47 {
48     var oDiv=document.getElementById('div1');
49     var disX=0;
50     var disY=0;
51     
52     var x=getCookie('x');
53     var y=getCookie('y');
54     
55     if(x)
56     {
57         oDiv.style.left=x+'px';//把cookie获取的参数传过来
58         oDiv.style.top=y+'px';
59     }
60     
61     oDiv.onmousedown=function (ev)
62     {
63         var oEvent=ev||event;
64         
65         disX=oEvent.clientX-oDiv.offsetLeft;
66         disY=oEvent.clientY-oDiv.offsetTop;
67         
68         document.onmousemove=function (ev)
69         {
70             var oEvent=ev||event;
71             
72             oDiv.style.left=oEvent.clientX-disX+'px';
73             oDiv.style.top=oEvent.clientY-disY+'px';
74         };
75         
76         document.onmouseup=function ()
77         {
78             document.onmousemove=null;
79             document.onmouseup=null;
80             
81             setCookie('x', oDiv.offsetLeft, 5);
82             setCookie('y', oDiv.offsetTop, 5);
83         };
84         
85         return false;
86     };
87 };
88 </script>
89 </head>
90 
91 <body>
92 <div id="div1">
93 </div>
94 </body>
95 </html>

 


__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/05/19/3086370.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Paxster  阅读(250)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
SQL AI 助手