javascript - 基础之cookie

2017-03-28 本文已影响47人 flionel

javascript-cookie.jpg

1. Cookie是什么

Web浏览器和服务器通过HTTP协议进行数据交流和通信，并且HTTP协议是无状态(stateless)的协议，所谓HTTP无状态，总结大概就是如下4点，

HTTP协议对于事务处理没有记忆能力。
对同一个url请求没有上下文关系。
每次的请求都是独立的，它的执行情况和结果与前面的请求和之后的请求是无直接关系的，它不会受前面的请求应答情况直接影响，也不会直接影。
服务器中没有保存客户端的状态，客户端必须每次带上自己的状态去请求服务器。

很多商业新的网站都需要在不同页面之间共享会话信息，例如在一个用户完成注册之后，在诸如下单和个人中心页面，都需要用户的登录信息，而无状态的HTTP协议无法达到这样的要求。那么通过什么样的技术才能在不同页面之间共享用户的会话信息呢？这就是cookie的用武之地了。

简单来说，cookie就是为了保存浏览器和服务器之间的会话状态，用以提升用户体验的一个存储介质。说起来cookie真是一个很甜很萌的命名呢，也许正是因为cookie优化了用户体验，像个小甜点一样让人开心吧。

2. Cookie工作原理

在浏览器和服务器通信时，服务器以cookie的格式向用户的浏览器发送一些数据，如果浏览器可以接收cookie，它会将cookie以纯文本(plain text record)的形式存储在用户的磁盘上。现在，当用户访问网站的另一个页面的时候，浏览器会将相同的cookie发送给服务器用来取回相关信息。一旦服务器获取到客户端发送的cookie信息，服务器就会知道之前与该浏览器通信时存储的什么内容。

Cookie并不是什么复杂的概念，它是一串记录了如下5个可变长度字段的纯文本，

Expires − 失效期，表示cookie失效的日期。如果expires是空白，那么在用户关闭浏览器的时候，该cookie就会失效。
Domain − 域名
Path − 路径，存储cookie的文件路径或一个web页面。一般来说推荐设置path为空，这样你可以从任何路径或页面获取到cookie。
Secure − 安全，如果包含了secure，那么只能从安全的服务器获取cookie；如果secure字段为空，则没有上述限制。
Name=Value，cookie都是以键值对的形式进行存储和读取的。

最初，cookie是为CGI编程而设计。cookie中包含的数据可以自动地在web浏览器和web服务器之间传播，所以服务器上的CGI脚本(scripts)可以对客户端存储的cookie进行读写操作。

在javascript中，可以通过Document对象的cookie属性来熟练地操作浏览器的cookie。javascript可以读取、创建、修改和删除应用于当前页面的cookie内容。

3. Cookie操作

与数据库类似，cookie也有相关的增删改查的操作，总结起来包括cookie的存储、读取、设置有效期以及删除等，下面通过代码逐个讲解。

3.1 存储cookie

创建cookie最简单的方式就是为document.cookie对象赋值一段字符串，如下代码所示，

document.cookie = "key1=value1;key2=value2;expires=date";

在这里，expires属性是可选的，如果你为expires属性设置一个有效的日期或时间，那么该cookie将在给定的日期或时间之后失效，此后cookie的值就不能访问了。

注意：cookie的值(value)不能包含逗号,，分号;和空白符。因此，在存储一个值到cookie之前，应该先用javascript内置的escape()函数对值的内容进行编码；反过来，读取cookie值的时候，应该先用unescape()函数对cookie值进行解码。

存储cookie的代码如下所示，

<html>
    <head>
    <script type="text/javascript">
    function writeCookie() {
        if (document.myform.customer.value == "") {
            alert("Enter some value")
            return
        }
        cookieValue = escape(document.myform.customer.value) + ";"
        document.cookie = "name=" + cookieValue
        document.write("Setting Cookies : " + "name=" + cookieValue)
    }
    </script>
    </head>
    <body>
        <form name="myform" action="">
            Enter name: <input type="text" name="customer"/>
            <input type="button" value="Set Cookie" onclick="writeCookie()"/>
        </form>
    </body>
</html>

3.2 读取cookie

读取cookie就像存储cookie一样简单，因为document.cookie对象的值就是cookie。因此任何时候当你想要获取cookie的时候就可以使用document.cookie这个字符串。在document.cookie这个字符串中，它包含了一系列name=value这样通过分号;分隔的键值对。可以使用字符串string的split()方法将cookie字符串分割，获取cookie的每一个name以及对应的value。

获取所有的cookie，如下代码所示，

<html>
    <head>
        <script type="text/javascript">
            function readCookie() {
                var allCookies = document.cookie
                document.write("All cookies : " + allCookies)
                // get all the cookies pairs in an array
                cookieArray = allCookies.split(';')
                for (var i = 0; i < cookieArray.length; i++) {
                    name = cookieArray[i].split('=')[0]
                    value = cookieArray[i].split('=')[1]
                    document.write("Key is : " + name + " and Value is : " + value)
                }
            }
        </script>
    </head>
    <body>
        <form name="myform" action="">
            <p>click the following button and see the result:</p>
            <input type="button" value="Get Cookie" onclick="readCookie()"/>
        </form>
    </body>
</html>

3.3 设置cookie有效期

为了延长当前浏览器会话中的cookie的生命周期，可以通过expires属性为cookie设置一个失效期，如下代码所示，设置cookie的有效期为1个月，

<html>
    <head>
        <script>
            function writeCookie() {
                var now = new Date()
                now.setMonth(now.getMonth() + 1)
                cookieValue = escape(document.myform.customer.value) + ";"
                document.cookie = "name=" + cookieValue
                document.cookie = "expires=" + now.toUTCString() + ";"
                document.write("Setting Cookies : " + "name=" + cookieValue)
            }
        </script>
    </head>
    <body>
        <form name="myform" action="">
            Enter name: <inpu type="text" name="customer">
            <input type="button" value="Set Cookie" onclick="writeCookie()">
        </form>

    </body>
</html>

3.4 删除cookie

如果将cookie删除，那么后面的请求试图访问cookie将会得到空的字符串。为了删除cookie，将cookie的失效期设置为一个过去的时间，如下代码所示，设置了cookie的失效期为1个月之前，

<html>
   <head>
      <script type="text/javascript">
            function writeCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() - 1 );
               cookieValue = escape(document.myform.customer.value) + ";"
               document.cookie="name=" + cookieValue
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write("Setting Cookies : " + "name=" + cookieValue)
            }
      </script>
   </head>
   <body>
      <form name="myform" action="">
         Enter name: <input type="text" name="customer"/>
         <input type="button" value="Set Cookie" onclick="wirteCookie()"/>
      </form>
   </body>
</html>

4. 小结

以上就是javascript中关于cookie的基本概念介绍和简单demo示范，读者可以查阅更多资料了解更多关于cookie的知识，如果有错误或者不当之处，还请读者朋友指正。

5. 参考链接

javascript and cookie