在javascript中cookie的使用范围还是挺广的，比如它可以用在记住用户名，记住一个拖拽的物体的位置，记住用户选择的网站样式等等。
我们今天就来好好学习一下js中的cookie，相信大家学习完后一定会觉得原来cookie是这么的简单和强大，那我们开始吧！
我们先来看下cookie是怎么组成的，看如下代码：
1 var oDate=new Date(); 2 oDate.setDate(oDate.getDate()+30); 3 document.cookie="user=blue;expires="+oDate; 4 document.cookie="pass=123"; 5 alert(document.cookie);
cookie是document对象下的一个子对象，它是由一些字符串组成的，包括你想要保存的字段，当然还有过期时间。过期时间是可有可无的，在你没有写过期时间的时候cookie会在关闭浏览器的时候就会清除。
上面这段代码设置了用户名和密码，同时设置了过期时间为一个月，设置过期时间的时候只要在expires后面加上日期对象就行。
当然上面这段代码过于简单，如果我们要大量使用cookie，或者要读取cookie，删除cookie，设置cookie等，为了让代码更具有封装性和重用性，我们将设置cookie，读取cookie，删除cookie分别封装为一个函数，代码如下：
1 //设置cookie 2 function setCookie (name, value, iDay) { 3 var oDate=new Date(); 4 oDate.setDate(oDate.getDate()+iDay); 5 document.cookie = name + '=' + value + ';expires=' + oDate; 6 } 7 8 //获取cookie 9 function getCookie (name) { 10 //'username=abc; password=123456; aaa=123; bbb=4r4er' 11 var arr=document.cookie.split('; '); 12 var i=0; 13 14 //arr->['username=abc', 'password=123456', ...] 15 for(i=0;i<arr.length;i++) { 16 //arr2->['username', 'abc'] 17 var arr2=arr[i].split('='); 18 19 if(arr2[0]==name) { 20 return arr2[1]; 21 } 22 } 23 return ''; 24 } 25 26 //删除cookie 27 function removeCookie (name) { 28 setCookie(name, '1', -1); 29 }
函数准备好了，很简单，我们来看看具体的实际应用吧。
当然，如果你要查看效果，一般得把文件放在服务器上进行访问，但是有个例外，就是可以在火狐上直接打开查看。
一：记住用户名：
代码如下：
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>web表单记住用户名</title> 6 <script> 7 window.onload = function () { 8 var oForm = document.getElementById('form1'); 9 var oUser = document.getElementsByName('user')[0]; 10 var oBtnClear = document.getElementsByTagName('a')[0]; 11 12 oForm.onsubmit = function () { 13 setCookie('user', oUser.value, 30); 14 }; 15 16 oUser.value = getCookie('user'); 17 18 oBtnClear.onclick = function () { 19 removeCookie('user'); 20 oUser.value=''; 21 }; 22 }; 23 </script> 24 </head> 25 <body> 26 <form id="form1" action="http://www.miaov.com/"> 27 用户名：<input type="text" name="user" /> 28 密码：<input type="password" name="pass" /> 29 <input type="submit" value="登录" /> 30 <a href="javascript:;">清除记录</a> 31 </form> 32 </body> 33 </html>
上面的代码你得引入写好的设置cookie，读取cookie以及删除cookie的函数。
二：cookie结合拖拽
代码如下：
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <style> 5 #div1 {100px; height:100px; background:red; position:absolute;} 6 </style> 7 <meta charset="UTF-8"> 8 <title>cookie结合拖拽</title> 9 <script> 10 window.onload=function () { 11 var oDiv = document.getElementById('div1'); 12 var disX = 0; 13 var disY = 0; 14 15 var x = getCookie('x'); 16 var y = getCookie('y'); 17 18 if (x) { 19 oDiv.style.left = x + 'px'; 20 oDiv.style.top = y + 'px'; 21 } 22 23 oDiv.onmousedown = function (ev) { 24 var oEvent = ev || event; 25 26 disX = oEvent.clientX - oDiv.offsetLeft; 27 disY = oEvent.clientY - oDiv.offsetTop; 28 29 document.onmousemove = function (ev) { 30 var oEvent = ev || event; 31 32 oDiv.style.left = oEvent.clientX-disX + 'px'; 33 oDiv.style.top = oEvent.clientY-disY + 'px'; 34 }; 35 36 document.onmouseup = function () { 37 document.onmousemove = null; 38 document.onmouseup = null; 39 40 setCookie('x', oDiv.offsetLeft, 5); 41 setCookie('y', oDiv.offsetTop, 5); 42 }; 43 44 return false; 45 }; 46 }; 47 </script> 48 </head> 49 <body> 50 <div id="div1"></div> 51 </body> 52 </html>
上面的代码同样的要引入写好的cookie设置，读取和删除函数。
怎么样，是不是很简单呢，cookie的学习就到此为止。大家要是在学习的过程中要是遇到什么困惑可以跟我留言，我会及时的回复大家的。