JavaScript中的Cookies:设置、获取和删除示例

什么是Cookies?

Cookie是存储在您计算机上供浏览器访问的一段数据。您可能也或多或少地享受过Cookie带来的便利。您是否曾经保存过您的Facebook密码,这样您每次登录时就不必输入它?如果是,那么您就在使用Cookies。Cookies以键/值对的形式保存。

您为什么需要Cookie?

Web浏览器和服务器之间的通信使用一种名为HTTP的无状态协议。无状态协议将每个请求视为独立的。因此,服务器在将数据发送给浏览器后不会保留数据。但在许多情况下,数据会再次需要。这时就需要Cookie了。有了Cookies,Web浏览器就不必在每次需要数据时都与服务器通信。相反,数据可以直接从计算机中获取。

JavaScript设置Cookie

您可以使用document.cookie属性像这样创建Cookie。

document.cookie = "cookiename=cookievalue"

您甚至可以为Cookie设置过期日期,以便在指定日期从计算机中删除该Cookie。过期日期应设置为UTC/GMT格式。如果您不设置过期日期,当用户关闭浏览器时,Cookie将被删除。

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2014 20:00:00 UTC"

您还可以设置域名和路径,以指定Cookie属于哪个域名以及该域名下的哪些目录。默认情况下,Cookie属于设置它的页面。

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2014 20:00:00 UTC; path=/ "

//为当前页面和整个域的路径创建一个Cookie。

JavaScript获取Cookie

您可以像这样访问Cookie,它将返回当前域保存的所有Cookie。

var x =  document.cookie

JavaScript删除Cookie

要删除Cookie,您只需将Cookie的值设置为空,并将expires的值设置为一个过去的时间。

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

自己尝试此示例

使代码工作的特殊说明… 按两次运行按钮

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>