JavaScript入门篇之Cookie的应用

　　最近看着人事系统的代码，还真是头疼。。为了尽快上手，看懂点东西，便快马加鞭了。看到前台用到了cookie，正好JS也学到了这个地方，这样就介绍一下Cookie的应用。

一、Cookie是什么

　　Cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器。

　　比如说，当你第一次访问淘宝时，要输入你的用户名和密码，这时用户信息会存储在你的浏览器的文本文件中，当你退出后内容就会存在硬盘中，下一次发生会话时，就读入到RAM中。

二、Cookie干什么

　　随着web越来越复杂，开发者急切的需要能够本地化存储的脚本功能。Cookie的意图就是在本地的客户端的磁盘上以很小的文件形式保存数据。

三、Cookie局限性

　（1）每个特定的域名下最多产生10个cookie。

　（2）cookie的最大大约是4096字节（4k），为了更好的兼容性，一般不能超过4095字节。

　（3）cookie存储在客户端的文本文件，所以特别重要和敏感的数据是不建议保存在cookie中的。这里是考虑安全性的问题。

四、Cookie如何工作

　（1）客户端通过浏览器发送报文给服务器，请求连接。

　（2）服务器端收到要求，根据客户端的要求建立一个Set-Cookies Header。

　（3）服务器端通过建立Response Header去返回给客户端。

　（4）客户端收到报文，解析，获取cookie，存在本机内存。

    Cookie有几个重要的属性，Cookie中有一个Expires（有效期）属性，这个属性决定了Cookie的保存时间，也可以重新设定来改变它，若不设置该属性，那么Cookie只在浏览网页期间有效，关闭浏览器后，这些Cookie会自动消失。还有path属性，可以限制访问Cookie的目录，domain用来限制域名访问，secure指定必须通过Https加密通信访问。对服务器起作用的是name和value属性。

五、创建，读取，删除Cookie

　　下面的例子中，分别写了四个函数创建，读取，删除，检测cookie的值。

<script lang="javasctript" type="text/javascript">
        function getCookie(c_name) {  //读取cookie值
            if (document.cookie.length > 0) {
                c_start = document.cookie.indexOf(c_name + "=")
                if (c_start != -1) {
                    c_start = c_start + c_name.length + 1
                    c_end = document.cookie.indexOf(";", c_start)
                    if (c_end == -1) c_end = document.cookie.length
                    return unescape(document.cookie.substring(c_start, c_end))
                }
            }
            return ""
        }

        function setCookie(c_name, value, expiredays) {//设置cookie值
            var exdate = new Date()
            exdate.setDate(exdate.getDate() + expiredays)
            document.cookie = c_name + "=" + escape(value) +
            ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
        }
    
        function delCookie(name)//删除cookie
        {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
        }

        function checkCookie() {  //检测cookie值
            username = getCookie('username')
            if (username != null && username != "")
            { alert('Welcome again ' + username + '!') }
            else
            {
                username = prompt('Please enter your name:', "")
                if (username != null && username != "") {
                    setCookie('username', username, 365)
                }
            }
        }

        setCookie("zhouzhou", 2, 3);
        checkCookie('zhouzhou');
        delCookie('zhouzhou');
        alert(getCookie('zhouzhou'));

    </script>

六、小结

　　本文简单的从几个角度介绍了：定义，作用，缺点，使用，流程。这让我联想到，Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。什么时候使用Cookie，什么时候使用Session，还是需要仔细研究的。