【原创】JavaScript中的cookie学习

在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的学习就到此为止。大家要是在学习的过程中要是遇到什么困惑可以跟我留言，我会及时的回复大家的。