面试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{width: 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>
