cookie入門

Cookie 是瀏覽器訪問服務器後，服務器傳給瀏覽器的一段數據。
cookie是http協議的一部分，當客戶端第一次向服務器端發送請求的時候，服務器會向客戶端發送一個 cookie，用來保存一些信息，當客戶端下次在向同一個服務器發送請求的時候，服務器經過識別客戶端的cookie，作出相應的動做。好比咱們登錄一個網站的時候，這個網站記錄咱們的用戶名和密碼，下次登錄就不用再輸入用戶名和密碼就能夠直接登陸了。

Web 服務器經過發送一個 Set-Cookie 的 HTTP 消息頭來建立一個 cookie，Set-Cookie消息頭是一個字符串，其格式以下：

Set－Cookie: NAME=VALUE;Expires=DATE;Path=PATH;Domain=DOMAIN_NAME;SECURE

在chrome控制檯中，咱們能夠經過開發者工具來查看服務器響應請求後發送給瀏覽器的http消息頭，從而看到set-cookie,具體步驟以下：F12打開開發者工具→Network

一樣在開發者工具中，能夠經過Application查看服務器發送了哪些cookie：

NAME:cookie的名稱，value是設置的cookie的值。

Expires：肯定Cookie有效終止日期，指定 cookie 在何時不會再被髮送到服務器，在這個指定時間後瀏覽器將會刪除這個 cookie。DATE屬性值必須按照特定的格式：Wdy(周幾), Date-Month-Year HH:MM:SS GMT ，若是不是這種格式將不會被識別。在沒有設置 expires 選項時，cookie 的生命週期僅限於當前會話中，關閉瀏覽器 cookie文件會自動消失。

Path：控制 Cookie 消息頭的發送時機，用戶請求資源 URL 中存在Path指定的路徑時，Web服務器纔會發送Cookie 消息頭。通常若是用戶輸入的URL中的路徑部分從第一個字符開始包含Path屬性所定義的字符串，瀏覽器就認爲經過檢查。若是Path屬性的值爲「/」，則Web服務器上全部的WWW資源都可讀取該Cookie。若是沒有設置path選項，則Path的屬性值默認爲Web服務器傳給瀏覽器的資源的路徑名。

Domain:肯定哪些Internet域中的Web服務器可讀取瀏覽器所存取的Cookie，即只有來自這個域的頁面纔可使用Cookie中的信息。未設置Domain選項時，設置Cookie的屬性值爲該Web服務器的域名。

須要注意的是，只有在 domain 選項覈實完畢以後纔會對 path 屬性進行比較。

SECURE：只有標記沒有值，只有當一個請求經過 SSL 或 HTTPS 建立時，包含 secure 選項的 cookie 才能被髮送至服務器。代表只有當瀏覽器和Web 服務器之間的通訊協議爲加密認證協議時，瀏覽器才向服務器提交相應的Cookie。

在JavaScript中，cookie用於保存狀態以及爲web瀏覽器提供一種身份識別機制。在 JavaScript 中咱們能夠經過 document.cookie 屬性來建立、維護和刪除 cookie 。

設置cookie：

document.cookie="userName = mavis ";

每一個cookie都是一個 name/value對，若要一次設置多個name/value對，能夠用下面的方法：

document.cookie = "userName=mavis; userId = 023";

在cookie中，使用escape()函數進行編碼，它能將一些特殊符號使用十六進制表示，特殊符號有分號（;）、逗號（,）、等號（=）以及空格等。可是使用escape()編碼後，在取出值之後須要使用unescape()進行解碼才能獲得原來的cookie值。

JavaScript中escape() 函數可對字符串進行編碼，這樣就能夠在全部的計算機上讀取該字符串。語法以下：escape(string)，string爲要被轉義或編碼的字符串。

獲取cookie的值：
使用document.cookie可直接得到由分號隔開的多個name/value（名/值）組成的字符串。這些名/值對包括該域名下的全部cookie。

var myCookie = document.cookie;

獲取指定的cookie值，

//設置兩個cookie
    document.cookie = "userName=mavis";
    document.cookie = "userId = 023";
    //獲取cookie字符串
    var myCookie = document.cookie;
    var arrCookie = myCookie.split(";");
    var userName;
    for(var i = 0;i < arrCookie.length;i++){
    var myArr = arrCookie[i].split("=");
    //找到名稱爲userName的cookie，並返回值
    if(userName = myArr[0]){
        userName = myArr[1];
        break;
        }
    }
    alert("welcome " + userName);

設置cookie的有效終止日期：
當咱們第一次在某個網站登陸咱們的ID是，有的網站會提醒是否保存該ID和密碼，在JavaScript中，其實是給cookie設置一個有效日期：

document.cookie = "userId = 023; expiress = GMT_String";

這條語句是將userId這個cookie設置爲GMT_String表示的過時時間，若是超過這個時間，cookie將會消失，不能夠再被訪問。
設置cookie值在30天之後過時：

//獲取當前時間 
    var date=new Date(); 
    var expiresDays=30; 
    //將date設置爲30天之後的時間 
    date.setTime(date.getTime()+expiresDays*24*3600*1000); 
    //將userId和userName兩個cookie設置爲30天后過時 
    document.cookie = "userId = 023; userName = mavis; expires = " + date.toGMTString();

刪除cookie：
可將其有效終止日期設置爲過去的時間：

var date=new Date(); 
//將date設置爲過去的時間
date.setTime(date.getTime()-10000); 
document.cookie="userId=023; expires="+date.toGMTString();

這樣就能夠把userId這個cookie刪除了。

指定可訪問cookie的路徑：經過設置path屬性來指定

//指定可訪問該cookie的目錄
document.cookie = "name = mavis; path = cookiePath"

//在整個網站均可訪問
    document.cookie = "name = mavis; path = /"

指定可訪問cookie的主機名：主機名是指同一個域下的不一樣主機，一個主機中建立的cookie在另外一個主機下是不能被訪問的，但能夠經過domain參數來實現對其的控制。
如：document.cookie="name=value;domain=.baidu.com"; 這樣設置可以使百度下的全部主機均可訪問該cookie。

一個例子：

function getCookie(name){
        if (document.cookie.length>0){
            start=document.cookie.indexOf(name + "=")
            if (start!=-1){ 
                start=start + name.length+1 
                end=document.cookie.indexOf(";",start)
                if (end==-1) end=document.cookie.length
                    return unescape(document.cookie.substring(start,end))
            } 
        }
        return ""
    }

    function setCookie(name,value,expiredays){
        var exdate=new Date()
        exdate.setDate(exdate.getDate()+expiredays)
        document.cookie=name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    }
   setCookie("username","tank",1800); //設置cookie的值，生存時間半個小時
   alert(getCookie('test')); //取得cookie的值，顯示tank

可是在運行的時候出了個問題，在個人chrome瀏覽器上不能顯示：

因而我上網查瞭如下緣由，是由於chrome瀏覽器對cookie有限制，可是我給chrome瀏覽器的cookie已經設置成「容許設置本地數據」，但仍是不行。看到這篇文章的大神，誰能給我講講這是爲啥嗎？感激涕零。

在edge瀏覽器上顯示出來是這樣的：

最後，路過的大神們，求大家幫忙解答一下chrome上不能執行的問題，謝謝啦~~~~