什么是cookie

大家好，我是IT修真院成都分院第5期的学员，一枚正直纯洁善良的web程序员
今天给大家分享一下，修真院官网js任务6，深度思考中的知识点——什么是cookie?

1. 背景介绍

什么是COOKIE

Cookie，有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端 上的数据（通常经过加密）。定义于 RFC2109 和 2965 中的都已废弃，最新取代的规范是 RFC6265 。 ---- 百度百科

在现代浏览器中其它类型的cookie有重要的作用。可能最重要的就是权限认证cookie，通过这种最常用的方法web服务器可以知道用户登录登出，以及正在登录的账号。

2. 知识剖析

cookie有哪几种？
一般来说cookie分为以下7种：

1. 1. Session Cookie
   这个类型的cookie只在会话期间内有效，即当关闭浏览器的时候，它会被浏览器删除。设置session cookie的办法是：在创建cookie不设置Expires即可。
2. 2. Persistent Cookie
   持久型cookie顾名思义就是会长期在用户会话中生效。当你设置cookie的属性Max-Age为1个月的话，那么在这个月里每个相关URL的http请求中都会带有这个cookie。所以它可以记录很多用户初始化或自定义化的信息，比如什么时候第一次登录及弱登录态等。
3. 3. Secure cookie
   安全cookie是在https访问下的cookie形态，以确保cookie在从客户端传递到Server的过程中始终加密的。这样做大大的降低的cookie内容直接暴露在黑客面前及被盗取的概率。
4. 4. HttpOnly Cookie
   ttpOnly属性指示浏览器除了HTTP/HTTPS请求之外不要显示cookie。这意味着这种cookie不能在客户端通过脚本获取，因此也不会轻易的被跨站脚本窃取。目前主流的浏览器已经都支持了httponly cookie。1.IE5+ 2.Firefox 1.0+ 3.Opera 8.0+。
5. 5. 3rd-party cookie
   第一方cookie是cookie种植在浏览器地址栏的域名或子域名下的。第三方cookie则是种植在不同于浏览器地址栏的域名下。例如：用户访问a.com时，在ad.google.com设置了个cookie，在访问b.com的时候，也在ad.google.com设置了一个cookie。这种场景经常出现在google adsense之类的广告服务商。广告商就可以采集用户的一些习惯和访问历史。
6. 6. Super Cookie
   超级cookie是设置公共域名前缀上的cookie。通常a.b.com的cookie可以设置在a.b.com和b.com，而不允许设置在.com上，但是很不幸的是历史上一些老版本的浏览器因为对新增后缀过滤不足导致过超级cookie的产生。
7. 7. Zombie Cookie
   僵尸cookie是指那些删不掉的，删掉会自动重建的cookie。僵尸cookie是依赖于其他的本地存储方法，例如flash的share object,html5的local storages等，当用户删除cookie后，自动从其他本地存储里读取出cookie的备份，并重新种植。

3. 常见问题

COOKIE的用处

1. 1. 保存用户的登陆状态，用户进行登陆，成功登陆后，服务器生成特定的cookie返回给客户端，客户端下次访问该域名下的任何页面，将该cookie的信息发送给服务器，服务器经过检验，来判断用户是否登陆。
2. 2. 记录用户的行为，例如，我们在某宝上搜索商品之后，下次再进入某宝的时候就会发现一堆推荐的商品。
3. 3. 电商购物车的处理，因为在不同页面，点击添加到购物车，这个信息也是记到了cookie里面。结账的时候统一提交。现在不易都记录在服务器的session，不会存储在本地cookie。
4. 4. 定制页面。如果网站提供了换肤的功能，我们这个时候也是将他记录到cookie里面，以便下次访问还是保持原来的风格页面。

COOKIE和SESSION的的区别

1. 1. 具体来说cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。同时我们也看到，由于才服务器端保持状态的方案在客户端也需要保存一个标识，所以session机制可能需要借助于cookie机制来达到保存标识的目的，但实际上还有其他选择。
2. 2. HTML5标准（绝大多数现代浏览器在某种程度上都支持）包含了一个Javascript API叫做Web storage:local storage和session storage。local storage的行为和持久化cookie类似，而session storage的行为和session cookie的行为类似，也就是session storage是绑定在一个单独的tab或者窗口的生命周期中的（也就是页面session），而session cookie是针对整个浏览器的。

如何利用实现自动登录

• 当用户在某个网站注册后，就会收到一个惟一用户ID的cookie。客户后来重新连接时，这个用户ID会自动返回，服务器对它进行检查，确定它是否为注册用户且选择了自动登录，从而使用户务需给出明确的用户名和密码，就可以访问服务器上的资源。

5. 编码实战

js中cookie的操作
（这里偷懒引用一下任昊师兄的代码）

unction saveCookie(){
        var userName = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        console.log(userName+password);
        var date = new Date();
        //  date.setDate(date.getDate()+1);
        date.setTime(date.getTime()+5000);
        //将cookie保存5秒钟 
        setCookie("userName",userName,date.toGMTString(),"","","");
        setCookie("password",password,date.toGMTString(),"","","");
        showCookie()
    }
 //设置Cookie
    /*
     在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie
     的名中做到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方法是用
     encodeURI()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码
     为“20%”，从而可以存储于cookie值中，而且使用此种方案还可以避免中文乱码的出现。
     在获取cookie时可以通过decodeURI()方法对cookie进行解码。
     Cookie的保存格式为："name=value; expires=evalue; path=pvalue;"
     每个属性之间通过：'分号+空格'(; )隔开;
     参数值的意思:
     name:表示要存入对象的名称，唯一必须设置（通常使用：user@domain格式命名，
     user为本地用户，domain为所访问网站的域名）。value：表示要存入的值。
     expires：该对象的有效时间（可选）（默认为当前浏览器会话有用，关闭浏览器就消失）;
     path:指定该Cookie作用范围（可选）(即：在那些网页上可用)；
     domain:设置web服务器的Cookie共享域（可选）(如：test*.com)表示域名为test*.com
     的服务器共享该Cookie
     secure：设置Cookie的传输过程是否加密（可选）（一般为SSH加密）
     */

好，注释很详细，我们下面来进行cookie 的读写：

function setCookie(name,value,expires,path,domain,secure){
        document.cookie=name+"="+encodeURI(value)+
            ((expires) ? "; expires=" + expires : "")+
            ((path) ? "; path=" + path : "")+
            ((domain) ? "; domain=" + domain : "")+
            ((secure) ? "; secure=" + secure : "");
    }//从这里可以上到上面的参数是如何被处理的
    /**
     获取浏览器中的Cookie时，只能够一次获取所有的cookie值，而不能指定cookie名称来获得
     指定的值，这正是处理cookie值最麻 烦的一部分。
     用户必须自己分析这个字符串，来获取指定的cookie值
     **/
    //获取浏览器中的Cookie
    function getCookie(cName){
        var cookieString = decodeURI(document.cookie);
        var cookieArray = cookieString.split("; ");
        console.log(cookieArray.length);
        for(var i = 0; i < cookieArray.length; i++){
            var cookieNum = cookieArray[i].split("=");
            console.log(cookieNum.toString());
            var cookieName = cookieNum[0];
            var cookieValue = cookieNum[1];
            if(cookieName == cName){
                return cookieValue;
            }
        }
        return false;
    }
    function showCookie(){
        var txt =  document.getElementById("txt_showCookie");
        txt.value = "用户名："+getCookie("userName")+"\n密码："+getCookie("password");
    }
    //删除Cookie就是简单的将cookie的expires属性设置为一个过去的时间即可。
    function deleteCookie(){
        var date = new Date();
        date.setTime(date.getTime()-1000);
        setCookie("userName",password,date.toGMTString(),"","","");
        setCookie("password",password,date.toGMTString(),"","","");
        showCookie();
    }

6. 扩展思考

COOKIES的缺点有哪些
除了隐私问题，cookie还有其他的技术缺陷。特别是它不能总是精确的标识用户，它可以被用来进行安全攻击，而且还与REST软件设计风格相悖。

1. 1. 错误识别:
   如果一台电脑上使用多了浏览器，那么每个浏览器都会给cookie一个单独的存储空间。因此cookie不是标识一个人，而是作为一个用户账号，一台电脑，一个浏览器之间的连接。因此任何使用多个账号多台电脑以及多个浏览器的用户都会有多个cookie。同样的，cookie不能区分共享一个账号一台电脑一个浏览器的多个用户。
2. 2. 客户端和服务端不一致的状态
   使用cookie可能在客户端状态和存储在cookie中的状态之间产生不一致性。如果用户取得了一个cookie，然后点击了浏览器的返回按钮，然后浏览器的状态通常不会和之前获取的状态一样了。例如，如果一个网上商城的购物车用cookie来实现的，在用户回退浏览器历史时，购物车里面的内容可能不会改变，如果用户按了一个按钮往购物车里面添加了一个物品，然后点击了浏览器的返回按钮，这个新增的物品还会保留在购物车中。这可能不是用户的意图，用户可能只想撤销之前选择新物品的操作。这可能导致不可靠、混乱和错误。所以web开发者应该注意这个问题，想到方法处理类似的问题。
   （详细和如何处理可以查看参考三，讲的相当好。）

7. 参考文献

a. 什么是跨域
b. 全面解读HTTP Cookie
c. Ajax常见问题

8. 相关链接

PPT:https://ptteng.github.io/PPT/PPT/js-06_cd_what_is_cookie.html

腾讯视频https://v.qq.com/x/page/z0510xkbdm5.html

日报链接http://www.jnshu.com/daily/25069?dailyType=others&total=85&page=1&uid=9948&sort=0&orderBy=3

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~

我的邀请码：99483716，或者你可以直接点击此链接：IT修真院