JavaScript---详解cookie

 　　　　1.什么是cookie？

　　　　　　　在讨论cookie之前，需要知道“会话跟踪”这个概念。

　　　　　　　　1. 什么是会话 
　　　　　　　　客户端打开与服务器的连接发出请求到服务器响应客户端请求的全过程称之为会话 


　　　　　　　　2. 什么是会话跟踪 
　　　　　　　　对同一个用户对服务器的连续的请求和接受响应的监视 


　　　　　　　　3. 为什么需要会话跟踪 
　　　　　　　　浏览器与服务器之间的通信是通过HTTP协议进行通信的，而HTTP协议是”无状态”的协议，它不能保存客户的信息，

　　　　　　　　即一次响应完成之后连接就断开了，下一次的请求需要重新连接，这样就需要判断是否是同一个用户，所以才应用会话跟踪技术来实现这种要求

　　　　　　　　　　

　　　　在程序中，“会话跟踪”是很重要的事情。由于http是无状态的协议（对于事物处理没有记忆能力，缺少状态意味着如果后续处理需要前面的信息，则它必须重传），一旦数据交换完毕，客户端和服务器端的连接就会关闭，再次交换数据需要建立新的连接，用户访问同一个站点就会重新加载所有数据，这样不利于交互（比如：用户A购买了一件商品放入购物车内，再次打开该网站购买商品时，服务器就无法判断用户A曾经是否已经将商品加入购物车。） 。所以，“会话跟踪”就是在这种情况下，应运而生。为了支持客户端与服务器之间的交互，我们就需要通过不同的技术为交互存储状态，而这些不同的技术就是Cookie和Session了。Cookie通过在客户端（通常是浏览器）记录信息确定用户身份，而Session通过在服务器端记录信息确定用户身份。回到我们的问题上：什么是Cookie？

　　　　Cookie译为“饼干”，是由W3C组织提出的，最早是由Netscape社区发展的一种机制，目前，所有主流浏览器都支持Cookie 。前面提到，http是无状态协议，服务器单从网络连接上是无法知道客户身份的。怎么办呢？就给客户端们颁发一个通行证吧。每人一个，无论谁访问都必须携带自己的通行证。这样服务器就可以从通行证上确认客户身份了。这就是Cookie的工作原理。

　　　　Cookie实际上是一小段的文本信息，客户端请求服务器，服务器就会使用response（？）向客户端浏览器颁发一个Cookie。浏览器就会把Cookie保存到文件里（不是缓存！不是缓存！清除浏览器缓存是无法清除掉cookie的）。当浏览器再次访问该网站时，浏览器就会把请求的网址连同该Cookie（注意：不是所有的Cookie，下面会说到）一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态与权限（注意：服务器是可以更改Cookie里的内容的）

　　　　查看某个网站颁发的Cookie很简单。在浏览器地址栏输入javascript：alert（document.cookie）【需要联网才能查看】。另：Cookie功能需要浏览器支持。

　　　　2.Cookie的特性

　　　　　　　很多网站都会使用Cookie来鉴别用户。如Google会向客户端颁发Cookie，百度也会向客户端颁发Cookie。那浏览器访问Google会不会携带上百度颁发的Cookie呢？或者Google能不能修改百度颁发的Cookie呢？    答案是否定的。Cookie的一个重要特性就是---不可跨域 （什么是跨域？） 不同域名之间是无法使用同一Cookie的。

　　　　3.Cookie的属性

　　　　　　　　

　　　　

　　　　　　在chrome控制台中的resources选项卡中可以看到cookie的信息。

　　　　　　　　　　　　一个域名下面可能存在着很多个cookie对象。

　　　　　　　　　　　　name字段为一个cookie的名称。

　　　　　　　　　　　　value字段为一个cookie的值。

　　　　　　　　　　　　domain字段为可以访问此cookie的域名。

　　　　　　　　　　　　　　非顶级域名，如二级域名或者三级域名，设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身，

　　　　　　　　　　　　　　不能设置其他二级域名的cookie，否则cookie无法生成。

　　　　　　　　　　　　　　顶级域名只能设置domain为顶级域名，不能设置为二级域名或者三级域名，否则cookie无法生成。

　　　　　　　　　　　　　　二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。

　　　　　　　　　　　　　　所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面或者到这个cookie的值了。
　　　　　　　　　　　　　　顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。

　　　　　　　　　　　path字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。

　　　　　　　　　　　expires/Max-Age 字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。

　　　　　　　　　　　不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，

　　　　　　　　　　　此cookie失效。

　　　　　　　　　　　Size字段 此cookie大小。

　　　　　　　　　　　http字段  cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，

　　　　　　　　　　　而不能通过document.cookie来访问此cookie。

　　　　　　　　　　　secure 字段 设置是否只能通过https来传递此条cookie。

　

　　　　4.Cookie的操作（在JavaScript下）

　　　　　　　　首先，要明白这一点：cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。

　　　　　　　　可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。

　　　　　　　　　　假设有这样一种情况，在某个用例流程中，由A页面跳至B页面，若在A页面中采用JS用变量temp保存了一个值，在B页面的时候，

　　　　　　　　　　　　同样需要使用JS来引用temp的变量值，

　　　　　　　　　　　　由于JS中的全局变量或者静态变量的生命周期是有限的，当发生页面跳转或者页面关闭的时候，这些变量的值会重新载入，

　　　　　　　　　　　　即没有达到保存的效果。

　　　　　　　　　　　　解决这个问题的最好的方案是采用cookie来保存该变量的值，因为cookie是保存在内存或者用户文件夹里的，可以看成是全局变量 。

　　　　　　　　　　　　那么如何来设置和读取cookie呢？

　　　　　　　　　 首先需要稍微了解一下cookie的结构，简单地说：cookie是以键值对的形式保存的，即key=value的格式。各个属性之间一般是以“;”分隔。

　　　　　　　　　　一个cookie的格式如下：

　Cookie名称（作为Cookie的索引便于以后的各种操作）+“=”+Cookie值+“；expires=+有效期+“；path=”+路径+“；domain=”+域+“；secure=”+安全级别

　　　　　　　　　每个Cookie实际上是有多个属性组成的，所以设置Cookie时理所当然地应该设置多个属性值，虽然不是每一个属性都必须填写，

　　　　　　　　　但大家至少应该把Cookie名称和Cookie值填上，否则这个Cookie就没有任何意义了。

　　　　　　　在JavaScript下 设置cookie（在服务器环境下才能设置）：

<script>

　　//设置cookie　　　

　　document.cookie="name=jjk;value=man;"

 //获取cookie

console.log(document.cookie); </script>

　　　　　　　　　　　　设置cookie的有效时间：

<script>
　　//获取时间对象
    var date = newDate();  
　　//获取当前日期并加上7天
    date.setDate(date.getDate() +7); 
　　//重新设置该cookie
    document.cookie = “user=张三;expires=” + date;
</script>

　　　　　　　　　删除cookie：　

<script>
    //失效时间设置在现在时间或现在之前的时间即可删除指定cookie
    //name值为指定要删除的那个cookie
    var date = new Date();
　　//当前时间删除cookie
    document.cookie = “user=张三;expires=” + date;
</script>

　　cookie的封装-----1.设置cookie：

　　　　　　该函数接收4个参数，分别是：name value  有效期  路径。 特别地，需要对name和value编码。因为name和value有中文的话，会出现乱码。

<script>
    function setCookie(name,value,expires,path){
     var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);
    if(expires instanceof Date){
       cookieText+=";expries="+expries;  
    }
    if(path){
        cookieText+=";path="+path;
    }
    document.cookie=cookieText;
    return  decodeURIComponent(document.cookie);
 }
 
 </script>

　　　cookie的封装-----2.获取特定的cookie

　　　　该函数接收一个参数 temp 为你想要获取的特定的cookie值

<script>
    function getCookie(temp) {
　　　　//获取到cookie    假如 cookie="name=jjk;value=19;age=18"
      var cookie = decodeURIComponent(document.cookie); 
　　　　//用split()把cookie切割成数组 [name=jjk,value=19,age=18]  
      var arr = cookie.split(“; ”); 
　　　　//循环数组   
      for (var i=0; i<arr.length; i++) {  
　　　　　　　//获取数组的第i个元素并切割为数组 例如：i=0:arr2=[name,jjk] i=1:arr2=[value,19] i=2:[age,18]         
            var arr2 = arr[i].split(“=”); 
　　　　　　　　//判断arr2的元素个数是否为2       
            if (arr2.length = 2) { 
　　　　　　　　　//判断arr2的第一个元素是否跟参数一致，如果是，返回arr2[1]       
       　　　　if (arr2[0] == temp) {                
                    return arr2[1];            
                  }        
            }    
      }    
      return “”;
}

</script>

　　　　cookie的封装------3.删除cookie　

　　　　该函数接受一个参数 为该cookie的name值

<script>
    function removeCookie(name) {
     document.cookie=encodeURIComponent(name)+“=; expires=” + new Date();
}

</script>

　

　　6.cookie的用处

　　　　我们只知道cookie可以保存用户数据，但他的具体用法有什么呢？或者说cookie通常用在什么场合？

　　　　（1）保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。

　　　　　　　　 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：

　　　　　　　　　　常见选项有一个月、三个 月、一年等。 

　　　　　 （2）跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，

　　　　　　　　　　当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，

　　　　　　　　　　　　它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，

　　　　　　　　　　　　　　使用起来非常方便。 

　　　　　（3）定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。

　　　　　　　　　　当用户下次访问时，仍然可以保存上一次访问的界面风格。 

　　　　　　（4）创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。

　　　　　　　　　　例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

　　与cookie相关的的场景

   　　　　场景1：注册用户 

　　　　　　　　需求：一条cookie保存所有用户的注册信息，不能存在相同的用户名

　　　　　　　　实现如下：

　　　　　　　　　　　　

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="cookiebase.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //cookie 保存7天
            onload = function(){
                
                
                document.getElementById("btn").onclick = function(){
                    var name = document.getElementById("username").value;
                    var psw = document.getElementById("psw").value;
　　               //不管存不存在cookie 先获取cookie user部分的值
                    var strCookie = getCookie('user');
             　　　　//判断一下返回的数据类型 返回json字符串 '[{"name":"jjk","psw":"123456"}]'
                    console.log(typeof strCookie);
    　　　　　　　　　　//使用三目运算判断是否存在cookie：如果strCookie存在，说明存在含有user部分的cookie，
　　　　　　　　　　　　//但不说明用户已经注册，还要继续往下判断 将json字符串转换为json对象 ，如果strCookie不存在
　　　　　　　　　　　　//将strCookie设置为空数组

                    var  aUser =strCookie ? JSON.parse(strCookie):[];
                    var bool = true;
　　　　　　　　　　　　//对aUser的元素进行循环，与输入的用户名对比是否一致。一致表示用户已注册
                    for(var i=0;i<aUser.length;i++){
                        if(aUser[i].name==name){
                            //用户已注册
                            bool=false;
                        }else{
                            //不能添加用户
                        }
                    }
　　　　　　　　　　　　//如果boo==true 表明用户可以注册 通过push()把用户的信息添加到数组aUser里 并将aUser转化为json字符串
　　　　　　　　　　　　//然后重新设置Cookie 
                    if(bool){
                        //用户可以注册
                        aUser.push({"name":name,"psw":psw})
                        console.log(JSON.stringify(aUser));
                        setCookie('user',JSON.stringify( aUser),7,"/")
                        alert('注册成功')
                    }else{
                        //用户已注册
                        alert('用户已注册');
                    }
                    
                    console.log(getCookie('user'));
                }
            }
        </script>
    </head>
    <body>
        用户：<input type="text" name="" id="username"/>
        密码：<input type="password" name="" id="psw"/>
        <input type="button" name="btn" id="btn" value="注册" />
    </body>
</html>

　　　　思路：1.获取到输入的用户名和密码；2.获取Cookie的user部分 3.判断Cookie是否存在 4.将输入的用户名和密码和Cookie进行比较（遍历Cookie的user部分）来判断用户是否已注册。

　　　

　　　场景2：用户登录

　　　　　　　　需求：输入的用户名和密码存在于cookie中，则判断用户登录成功

　　　　　　　　实现如下：

　　　　

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="cookiebase.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //如果输入的用户名和密码 存在cookie当中
            //则判断登录成功
            
            onload = function(){
                
            
                document.getElementById("btn").onclick = function(){
                    
                    //获取当前输入的用户信息
                    var name = document.getElementById("username").value;
                    var psw = document.getElementById("psw").value;
                    
    //原生操作
    //                var str = document.cookie;
    //                if(str){
    //                    var arr = str.split("; ")
    //                }else{
    //                    console.log('无cookie');
    //                }    
    
                    //将用户信息与当前cookie里面的用户信息 进行判断
                    
                    //获取当前cookie里面的用户信息
                    var sCookie = getCookie('user');
                    console.log(sCookie);
                    var aUser = sCookie?JSON.parse(sCookie):[];
                    console.log(aUser);
                    if(aUser.length<=0){
                        alert('用户没有注册');
                    }else{
                        //判断输入的用户名和密码是否存在当前cookie中
                        var bool = false; //用户不存在
                        for(var i =0;i<aUser.length;i++){
                            //{name：jjk，psw：12345}
                            //判断用户名是否存在  用户的密码是否正确
                            if(aUser[i].name ==name && aUser[i].psw ==psw){
                                bool = true;//用户存在

                            }
                        }
                        
                        if(bool){
                            //将当前的登录信息存在新的cookie里面，用于判断当前登录用户是谁（一般主页要用到这条cookie，下面会讲到）
                            var user = {"user":name};
                            setCookie('login',JSON.stringify(user),7,'/')
                            console.log(document.cookie);
                            alert('用户登录成功');
　　　　　　　　　　　　　　　　//跳转到主页
                            location.href="http://localhost/index.html";
                            
                        }else{
                            alert('用户信息错误');
                        }
                    }
                    
                }
            }
        </script>
    </head>
    <body>
        用户：<input type="text" name="" id="username" />
        密码：<input type="password" name="" id="psw" />
        <input type="button" name="btn" id="btn" value="登录" />
    </body>
</html>

　　场景3：主页提示用户登录

　　　　　需求：主页显示用户名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="cookiebase.js"></script>
    <script>
    window.onload=function(){
        var txt=document.getElementById('txt');
        var strCookie=getCookie('login');
        console.log(strCookie);
      var arr=strCookie ? JSON.parse(strCookie):[];
        console.log(arr.user);
       if(arr.length<=0){
            alert('请登录帐号');
        }else{
            
            txt.innerHTML=arr.user;
            
        }
    }
        
    </script>
</head>
<body>
    欢迎 ，<span id="txt"></span>回来！
    <button id="btn">点击退出</button>
                </body>
</html>

 场景4：使用cookie保存商品id  点击商品跳转到商品详情页

　　　　需求：用户点击商品后，自动跳转到商品详情页

　　　Session