JavaScript中的cookie

　　cookie本身没什么可介绍的，但是cookie在JavaScript中，有很多需要注意的

　　首先，cookie在JavaScript中，是window.document对象的一个属性，所以访问cookie是通过document.cookie这种形式。

设置cookie值

　　最直接的方式是下面这样：

<!--- demo.html -->

<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<input type="button" value="跳转" id="btn">

</body>

<script>

	document.cookie = "name=abc";

	document.cookie = "age=20";

	var btn = document.getElementById("btn");

	btn.onclick= function(){

		window.open("index.php","_blank");

	}

</script>

</html>

查看cookie

　　方式1，使用PHP的超全局数组来读取，注意运行的另外一个文件了，不是保存cookie的那个文件：

/*  index.php */

<?php

    print_r($_COOKIE);

 ?>

　　方式二：使用document.cookie来set值，那么仍旧可以使用document.cookie来get值，不过仍旧不是保存cookie的那个文件。

<!-- index.php  -->

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>打印cookie</title>

</head>

<body></body>

<script>

    alert(document.cookie);

</script>

</html>

　　上面两个查看cookie的代码都保存在另外一个文件中（index.php)，而不是保存cookie的demo.html，这是因为在demo.html中无论怎么设置，无论刷新多少次，都不会出现cookie值，这是因为cookie的特性。

　　简而言之：在页面中设置cookie的那一次，是读不到cookie的，因为本次设置的cookie要下次才能生效，而不断地刷新，cookie就不断地重新保存，于是就始终取不到cookie的值。同时cookie是有作用范围的，也就是不能访问不同域的cookie，通常只能访问本域的cookie，所以可以在同一个域中范文设置的cookie，即在一个程序（demo.html)中设置，在另外一个程序中（index.php）中获取，demo.html和index.php都在同一个域下（localhost)。

　　下面是使用PHP的全局数组打印出的cookie内容如下：

Array

(

    [name] => abc

    [age] => 20

)

　　下面是使用打印document.cookie的信息，如下：

name=abc; age=20

　　可以看到，虽然在demo.html中，对document.cookie赋了两次值，一次是name=abc，一次是age=20，但是在这里，第二次赋值并没有覆盖掉第一次赋的值，反而两个都保存了，而且使用document.cookie的形式是以字符串保存，不同的项用分号加空格来分隔，但是我们在设置多项的cookie的时候，可以使用一下形式，中间直接用分号分隔，但最好使用cookie。

document.cookie = "name=abc; age=20"

设置过期时间

　　设置cookie的过期时间，和php差不多，都是当前时间加上过期时间，即在那个时间点。有点不同的是，php中过期时间的单位是秒，格式如下：

//php中的用法

setcookie("attr", $value, time()+3600);  /* 1 小时过期  */

　　但是JavaScript更加方便一点，可以直接设置几天过期，几年过期

<script>

	var date = new Date();

	//date.setFullYear(date.getFullYear() + 1);//一年后过期

	//date.setMonth(date.getMonth() + 1 + 2);//2个月后过期，注意多加一个1

	//date.setDate(date.getDate() + 1);//一天后

	date.setSeconds(date.getSeconds() + 30);//30s后过期

	document.cookie = "name=abc;expires=" + date;

	document.cookie = "age=20";

	var btn = document.getElementById("btn");

	btn.onclick= function(){

		window.open("test.html","_blank");

	}

</script>

　　需要注意的是，上面这些setDate，setMonth，setFullYear不能叠加，只能设置一项，因为使用php习惯了，随意推荐使用秒作单位。

　　还有一个要注意：如果使用简短方式设置cookie和过期时间，如下

document.cookie = "name=abc; expires=" + (过期时间1）"; "age=20; expires=" + 过期时间

　　上面这一行代码保存了两个cookie信息，有两个expires，每一个expire是前面一个cookie项的过期时间，而不是后面cookie项的过期时间。

　　在获取cookie的时候，利用document.cookie不会获取到expires。

封装

　　可以将上面设置cookie的过程一下，可以封装成一个json格式的类，有添加cookie，获取cookie，删除cookie的功能。

<script>

	cookie = {

		setCookie : function (key, value,expireSeconds){

			var date = new Date();

			date.setSeconds(date.getSeconds() + expireSeconds);

			document.cookie = key + "=" + value + "; expires=" + date;

		},

		getCookie : function (key){

			var items = document.cookie.split("; ");//千万注意是以分号加空格来分割

			for(var i = 0; i < items.length; i++){

				item = items[i].split("=");

				if(item[0] == key){

					return item[1];

				}

			}

		},

		removeCookie : function(key){

			this.setCookie(key,"",-1);

		}

	}

	cookie.setCookie("name","JavaScript",300);//300s过期

	cookie.setCookie("age","30",300);

	alert(cookie.getCookie("name"));//JavaScript

	alert(cookie.getCookie("age"));//30

	cookie.removeCookie("age");

	alert(cookie.getCookie("age"));//空

</script>