面试cookie

cookie : 存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来像访问者电脑上存储数据
1.不同的浏览器存放的cookie位置不一样，也是不能通用的
2.cookie的存储是以域名形式进行区分的
3.cookie的数据可以设置名字的
4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
5.每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样
我们通过document.cookie来获取当前网站下的cookie的时候，得到的字符串形式的值，他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来
如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间
cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>面试cookie</title>
 6     <style type="text/css">
 7         #div1{ 150px;height: 150px;background: #0ff;position: absolute;}
 8     </style>
 9     <script type="text/javascript">
10         function setCookie(name,value,iDay){
11             var oDate=new Date();
12             oDate.setDate(oDate.getDate()+iDay);
13             document.cookie=name+"="+value+";expires"+oDate;
14         }
15 
16         function getCookie(name){
17             var arr=document.cookie.split('; ');
18             for (var i = 0; i < arr.length; i++) {
19                 var arr2=arr[i].split("=");
20                 if (arr2[0]==name) {
21                     return arr2[1];
22                 };
23             };
24             return '';
25         }
26 
27         function removeCookie(name){
28             setCookie(name,'a',-1);
29         }
30 
31         window.onload=function(){
32             var oDiv=document.getElementById("div1");
33             var disX=0;
34             var disY=0;
35             var moveX=0;
36             var moveY=0;
37             oDiv.onmousedown=function(ev){
38                 removeCookie("left");
39                 removeCookie("top");
40                 var ev=ev||event;
41                 disX=ev.clientX-oDiv.offsetLeft;
42                 disY=ev.clientY-oDiv.offsetTop;
43                 document.onmousemove=function(ev){
44                     var ev=ev||event;
45                     moveX=ev.clientX-disX;
46                     moveY=ev.clientY-disY;
47                     oDiv.style.left=moveX+"px";
48                     oDiv.style.top=moveY+"px";
49                     
50                 }
51                 document.onmouseup=function(){
52                     setCookie("left",moveX,30);
53                     setCookie("top",moveY,14);
54                     document.onmousemove=null;
55                     document.onmouseup=null;
56                 }
57             }    
58 
59             oDiv.style.left=getCookie("left",moveX)+"px";
60             oDiv.style.top=getCookie("top",moveY)+"px";
61         }
62     
63     </script>
64 </head>
65 <body>
66     <div id="div1"></div>
67 </body>
68 </html>