开发学院网页设计 JavaScript JavaScript中cookie的使用阅读

JavaScript中cookie的使用

　2012-11-19 20:04:42　来源：WEB开发网　　　

核心提示： 通过JavaScript的网页客户端编程，可以使用cookie对数据进行存储，JavaScript中cookie的使用，相对于JavaScript中用于存储数据的变量来说，生命期更长，使用cookie保存是一种不错的选择，下面是封装好的进行cookie操作的JavaScript代码：//向cookie写

通过JavaScript的网页客户端编程，可以使用cookie对数据进行存储。相对于JavaScript中用于存储数据的变量来说，生命期更长，JavaScript的变量会在当前网页关闭时销毁所有的数据，而存储在cookie中的数据即使网页关闭了也会保留某些你需要的数据（比如用户名，邮箱帐号等等），以便下次打开网页时继续使用；对于那些需要长期保存又不必要存储在网络服务器上的数据，使用cookie保存是一种不错的选择。

下面是封装好的进行cookie操作的JavaScript代码：

//向cookie写入数据
function writeCookie(name, value, days) {
  // 定义有效日期（cookie的有效时间）
  var expires = "";

  // 为有效日期赋值
  if (days) {
    var date = new Date();
	//设置有效期（当前时间+时间段）
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));//时间段为毫秒数 
    expires = "; expires=" + date.toGMTString();
  }

  // 给cookie赋值 name, value和expiration date（有效期）
  document.cookie = name + "=" + value + expires + "; path=/";
}
//读取cookie数据
function readCookie(name) {
  var searchName = name + "=";
  var cookies = document.cookie.split(';');
  for(var i=0; i < cookies.length; i++) {
    var c = cookies[i];
    while (c.charAt(0) == ' ')
      c = c.substring(1, c.length);
    if (c.indexOf(searchName) == 0)
      return c.substring(searchName.length, c.length);
  }
  return null;
}
//清楚所有的cookie
function eraseCookie(name) {
  // 将时间设置成-1将清除存储在cookie中的数据
  writeCookie(name, "", -1);
}

将其复制在记事本里，改名为cookie.js。

接下来我们再打开一个记事本写入如下html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> 
	<script type="text/javascript" src="cookie.js"></script>
	<script type="text/javascript">
		var userName
		function button_click()
		{
			userName=readCookie("username");
			if(userName){
				alert("Hello "+userName+",I miss you")
			}
			else{
				var userName=prompt("What is your name","Enter you name here")
				writeCookie("username",userName,5);
			}
		}
	</script>
</head>
<body>
	<input type="button" value="Click me" onclick="button_click();" />

</body>
</html>