cookie入門與學習

據我對cookie誕生背景的瞭解，cookie是由網景公司建立的，目的就是將用戶的數據儲存在客戶端上。伴隨的HTML5的出現，如今又有另一個解決數據離線儲存的方案，就是HTML5中的Web storage，其中兩個重要對象sessionStorage和localStorage能夠解決瀏覽器sessions和長期儲存數據的目的，而且兼容性還不錯，IE8+以上瀏覽器都支持。

那咱們直接學習Web storage不就能夠了？我的認爲，這不是一個很好的學習方法。Web Storage的出現主要仍是由於cookie的一些小毛病不可以知足前端工程師平常開發而被加入到HTML5中做爲新的API的。本質上說，localStorage和sessionStorage實現的本質與cookie是同樣的。因此在接觸以前，先熟悉而且掌握cookie對於Web storage的學習還有很大的幫助。

這篇文章會涉及的內容與技術：

• module bundler：webpack
• javascirpt如何實現讀取，寫入，刪除Cookie
• js-cookie實現讀取，寫入，刪除Cookie

cookie定義

cookie其實就是服務器保存在瀏覽器的一小段文本信息。怎麼保存呢？瀏覽器在向服務器發送一個http請求時，會在發送請求的首部字段中添加Cookie字段，而且附上相應的key，value。服務器接收到請求而且正確返回響應的時候，會在響應的頭部字段中添加Set-cookie字段。這時候就完成了一次數據儲存的操做。當咱們關閉瀏覽器而且再次打開的時候，相應須要存儲的信息就會在expires指定的期限內存儲下來。

簡單的說，就是：

• 當用戶訪問web頁面時，他的記錄能夠保存在cookie中。
• 在用戶下一次訪問同一頁面時，能夠在cookie中讀取用戶的訪問記錄。

cookie特色

• 每一個cookie的大小不能超過4KB。
• 經過HTTP協議的方式來存儲數據。
• cookie會影響同一域名下的根目錄及其子目錄。舉例來講，若是當前URI是keithchou.github.io，若是設置path爲'/'或者不設置（默認值爲/），這個cookie對該域名的根路徑和它的全部子路徑都有效。若是path設置爲/music，那麼這個cookie只有在訪問keithchou.github/music及其子路徑纔有效。
• 同源政策。瀏覽器的同源政策規定，兩個網址只要域名和端口相同，就能夠共享cookie。注意，這裏不要求協議相同。也就是說，'http://keithchou.com'設置的cookie，能夠被'https://keithchou.com'讀取。

cookie屬性

cookie經常使用的屬性有：

• value
• domain
• path
• expires
• secure
• HttpOnly

屬性的具體內容就再也不贅述了，屬性都比較簡單。

cookie實現

接下來想說說兩種方式來實現cookie。一是原生javascript實現cookie，二是經過js-cookie這個小框架來實現cookie。

javascript實現數據存儲

基本的cookie操做有三種：讀取、寫入和刪除。javascript操做cookie主要是經過document.cookie來實現的。

document.cookie的一大特色是，能夠讀取全部的Cookie，可是每次寫入cookie的時候只能一條一條寫入。看一個從百度獲取的cookie。

//讀取cookie，一次性獲取全部cookie。 console.log(document.cookie); //每一個cookie都是以鍵值對的形式存在，而且經過；分隔。 "BAIDUID=9BD404162B2978E266B82B0D052A12D7:FG=1; BIDUPSID=605A0EB7E85170299BCFFF6C2B042840; PSTM=1474937533; BD_UPN=13314752; ispeed_lsm=6; BDRCVFR[Fc9oatPmwxn]=G01CoNuskzfuh-zuyuEXAPCpy49QhP8; BD_HOME=0; H_PS_PSSID=1440_21421_18240_21116_21454_21377_21526_21191_21399; BD_CK_SAM=1; PSINO=7; H_PS_645EC=9c44kg7jUnDfYs5vfqg9n3QbElgAvuf8phS5ZsmD2FIE2KxSARX534GRQw1z7f0cZ6wu; locale=zh; pgv_pvi=4703388672; pgv_si=s5301332992" //寫入cookie，只能一條一條寫入。 document.cookie = 'unclekeith=21'; document.cookie = 'sex=boy'; ...

原生javascript實現cookie的方法以下。此代碼摘自《javascript高級程序設計 第三版》。

var CookieUtil = { //讀取cookie，判斷某個cookie是否存在。 //讀取操做配合 unclekeith=21; sex=boy 這個cookie會更好理解讀取cookie的操做。 get: function (name){ var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; if (cookieStart > -1){ var cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1){ cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); } return cookieValue; }, //寫入cookie。 set: function (name, value, expires, path, domain, secure) { var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); if (expires instanceof Date) { cookieText += "; expires=" + expires.toGMTString(); } if (path) { cookieText += "; path=" + path; } if (domain) { cookieText += "; domain=" + domain; } if (secure) { cookieText += "; secure"; } document.cookie = cookieText; }, //刪除cookie unset: function (name, path, domain, secure){ this.set(name, "", new Date(0), path, domain, secure); } }; 

javascript實現cookie的代碼並不複雜，只要有javascript基礎，基本上均可以看懂。給出原生javascript實現cookie的操做是由於要去實際的瞭解一下整個過程，否則使用前端大牛封裝好的庫來實現cookie總感受有一些東西特別難以理解。

js-cookie

首先我想說的是，網上大量的資料都是對$.cookie進行介紹的。官網明確指出這個項目已經再也不繼續維護了。爲何還要使用阿？因此再也不介紹。這裏要介紹另一個實現cookie的庫。js-cookie。具體的api在官網上有詳細的介紹。傳送門：js-cookie

首先，進入本地項目，經過cnpm安裝js-cookie。

cnpm install js-cookie --save

而後，在使用webpack中的入口文件entry.js引入js-cookie。

import Cookies from 'js-cookie';

固然，接下來就可使用了。下面是一個登陸界面的小demo。

html部分
<p>
    <label for="username">用戶名：</label> <input type="text" id='username' name='username' placeholder="請輸入用戶名"> </p> <p> <label for="password">密碼：</label> <input type="password" id='password' name='password' placeholder="請輸入密碼"> </p> <p> <label for="confirm_password">再次輸入密碼：</label> <input type="password" id='confirm_password' name='confirm_password' placeholder="再次輸入密碼"> <input type="checkbox" id='rememberUser'> <label for="rememberUser">記住用戶名</label> </p> //js部分 //先判斷瀏覽器是否儲存有對應的cookie。 if (Cookies.get('username')) { $("#username").val(Cookies.get('username')); $('#rememberUser').attr('checked',true); }; if (Cookies.get('password')) { $('#password').val(Cookies.get('password')); $('#confirm_password').val(Cookies.get('password')); } //設置cookie。當點擊 記住用戶名 操做時儲存相應的數據。 $('#rememberUser').click(function(){ if (this.checked) { if ($('#username').val() ==='') { alert('請輸入用戶名'); this.checked = false; } else { Cookies.set('username',$('#username').val(),{ path:'/', expires: 1 }); Cookies.set('password',$('#password').val(),{ path:'/', expires: 1 }) } } });

運用JS設置cookie、讀取cookie、刪除cookie

JavaScript是運行在客戶端的腳本，所以通常是不可以設置Session的，由於Session是運行在服務器端的。

而cookie是運行在客戶端的，因此能夠用JS來設置cookie. 

假設有這樣一種狀況，在某個用例流程中，由A頁面跳至B頁面，若在A頁面中採用JS用變量temp保存了某一變量的值，在B頁面的時候，一樣須要使用JS來引用temp的變量值，對於JS中的全局變量或者靜態變量的生命週期是有限的，當發生頁面跳轉或者頁面關閉的時候，這些變量的值會從新載入，即沒有達到保存的效果。解決這個問題的最好的方案是採用cookie來保存該變量的值，那麼如何來設置和讀取cookie呢？ 

首先須要稍微瞭解一下cookie的結構，簡單地說：cookie是以鍵值對的形式保存的，即key=value的格式。各個cookie之間通常是以「;」分隔。 

JS設置cookie:
 
假設在A頁面中要保存變量username的值("jack")到cookie中,key值爲name，則相應的JS代碼爲： 

document.cookie="name="+username;  

JS讀取cookie:
 
假設cookie中存儲的內容爲：name=jack;password=123
 
則在B頁面中獲取變量username的值的JS代碼以下：

var username=document.cookie.split(";")[0].split("=")[1];  

//JS操做cookies方法! 

//寫cookies 

function setCookie(name,value) 
{ 
    var Days = 30; 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + Days*24*60*60*1000); 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 

//讀取cookies 

function getCookie(name) 
{ 
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
 
    if(arr=document.cookie.match(reg))
 
        return unescape(arr[2]); 
    else 
        return null; 
} 

　　或

    function getCookie(name){
            if(name){
                var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
                if(arr=document.cookie.match(reg))
                    return (decodeURIComponent(arr[2]));
                else
                    return null;
            }
            return null;
        };

　　

//刪除cookies 

function delCookie(name) 
{ 
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    var cval=getCookie(name); 
    if(cval!=null) 
        document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 
} 

 

//使用示例 setCookie("name","hayden"); alert(getCookie("name")); //若是須要設定自定義過時時間 //那麼把上面的setCookie　函數換成下面兩個函數就ok; //程序代碼 function setCookie(name,value,time){     var strsec = getsec(time);     var exp = new Date();     exp.setTime(exp.getTime() + strsec*1);     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } function getsec(str){    alert(str);    var str1=str.substring(1,str.length)*1;    var str2=str.substring(0,1);    if (str2=="s")   {         return str1*1000;    }   else if (str2=="h")   {        return str1*60*60*1000;    }   else if (str2=="d")   {        return str1*24*60*60*1000;    } } //這是有設定過時時間的使用示例： //s20是表明20秒 //h是指小時，如12小時則是：h12 //d是天數，30天則：d30 setCookie("name","hayden","s20");