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>
