日期:2014-05-16  浏览次数:20411 次

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>

       保存成test.html文件,拖放到浏览器运行,对cookie的简单测试就完成了,当你多次单击按钮,或者关闭浏览器再打开,浏览器都能记住你的名字。


 

 

 

1楼lidaasky昨天 20:54
来取经,不错不错