JavaScript获取cookie

JavaScript 通过 document.cookie 来获取 cookie 。

遗憾的是，document.cookie 只能获取所有 cookie 的集合，不能获取单个 cookie 。

例如，获取当前cookie集合：

?

1 2 3 4 5 6

<input id= "demo1" type= "button" value= "获取cookie" /> <script type= "text/javascript" > document.getElementById( "demo1" ).onclick= function (){      alert(document.cookie); } </script>

实例演示：


我们可以自定义一个函数来获取单个 cookie 的值。

我们知道，cookie 集合的格式是这样的：
name1=value1 ; name2=value2 ; name3=value3 ; ...
将 cookie 以分号（;）分组，再以等号（=）分组，就能得到每个 cookie 的名称和值。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/**    *  func  getCookie()  获取单个cookie的值    *  pram  cookieName  cookie的名称 **/ function getCookie(cookieName){      var cookieObj={},            cookieSplit=[],            // 以分号（;）分组            cookieArr=document.cookie.split( ";" );      for ( var i=0,len=cookieArr.length;i<len;i++)          if (cookieArr[i]) {              // 以等号（=）分组              cookieSplit=cookieArr[i].split( "=" );              // Trim() 是自定义的函数，用来删除字符串两边的空格              cookieObj[cookieSplit[0].Trim()]=cookieSplit[1].Trim();          }      return cookieObj[cookieName]; }

例如，获取 name 的值：

?

1	getCookie[ "name" ];

对上面的代码稍作修改，就可将 cookie 的值保存为对象的属性，使用时非常方便。代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/**    *  func  getCookieObj()  获取所有cookie的值并将其保存为对象的属性 **/ function getCookieObj(){      var cookieObj={},            cookieSplit=[],            // 以分号（;）分组            cookieArr=document.cookie.split( ";" );      for ( var i=0,len=cookieArr.length;i<len;i++)          if (cookieArr[i]) {              // 以等号（=）分组              cookieSplit=cookieArr[i].split( "=" );              // Trim() 是自定义的函数，用来删除字符串两边的空格              cookieObj[cookieSplit[0].Trim()]=cookieSplit[1].Trim();          }      return cookieObj; }

例如，获取 name 的值：

?

1 2	var cookieObj=getCookieObj(); cookieObj.name;

举例，设置并获取cookie的值：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<table>      <tr>          <td>用户名：</td>          <td><input id= "demo_input1" type= "text" /></td>          <td>密码：</td>          <td><input id= "demo_input2" type= "text" /></td>      </tr>      <tr>          <td colspan= "2" align= "center" ><input id= "demo_button1" type= "button" value= "设置Cookie" /></td>          <td colspan= "2" align= "center" ><input id= "demo_button2" type= "button" value= "获取Cookie" /></td>      </tr> </table>   <script type= "text/javascript" >      document.getElementById( "demo_button1" ).onclick= function (){          var cookie_username= "username=" +escape(document.getElementById( "demo_input1" ).value)+ ";" +                          "expire=" +(( new Date()).getTime()+600*1000);          var cookie_password= "password=" +escape(document.getElementById( "demo_input2" ).value)+ ";" +                          "expire=" +(( new Date()).getTime()+600*1000);          document.cookie=cookie_username;          document.cookie=cookie_password;      }      document.getElementById( "demo_button2" ).onclick= function (){          var cookieObj=getCookieObj();          alert(              "用户名：" +unescape(cookieObj.username)+ "\n" +              "密码：" +unescape(cookieObj.password)          );      } </script>

实例演示：

用户名：		密码：