javascript cookie

時間  2019-11-06
標籤 javascript cookie 欄目 JavaScript 简体版
原文   原文鏈接

什麼是 Cookiehtml

　　「cookie 是存儲於訪問者的計算機中的變量。每當同一臺計算機經過瀏覽器請求某個頁面時，就會發送這個 cookie。你可使用 JavaScript 來建立和取回 cookie 的值。」 - w3school
　　cookie 是訪問過的網站建立的文件，用於存儲瀏覽信息，例如我的資料信息。chrome

　　從JavaScript的角度看，cookie 就是一些字符串信息。這些信息存放在客戶端的計算機中，用於客戶端計算機與服務器之間傳遞信息。跨域

　　在JavaScript中能夠經過 document.cookie 來讀取或設置這些信息。因爲 cookie 多用在客戶端和服務端之間進行通訊，因此除了JavaScript之外，服務端的語言（如PHP）也能夠存取 cookie。數組

 

　　Cookie 基礎知識瀏覽器

  • cookie 是有大小限制的，每一個 cookie 所存放的數據不能超過4kb，若是 cookie 字符串的長度超過4kb，則該屬性將返回空字符串。安全

  • 因爲 cookie 最終都是以文件形式存放在客戶端計算機中，因此查看和修改 cookie 都是很方便的，這就是爲何常說 cookie 不能存放重要信息的緣由。服務器

  • 每一個 cookie 的格式都是這樣的：<cookie名>=<值>；名稱和值都必須是合法的標示符。cookie

  • cookie 是存在 有效期的。在默認狀況下，一個 cookie 的生命週期就是在瀏覽器關閉的時候結束。若是想要 cookie 能在瀏覽器關掉以後還可使用，就必需要爲該 cookie 設置有效期，也就是 cookie 的失效日期。dom

  • alert(typeof document.cookie)　　結果是 string，曾經我覺得是array，還鬧過笑話...囧函數

  • cookie 有域和路徑這個概念。域就是domain的概念，由於瀏覽器是個注意安全的環境，因此不一樣的域 之間是不能互相訪問 cookie 的(固然能夠經過特殊設置的達到 cookie 跨域訪問)。路徑就是routing的概念，一個網頁所建立的 cookie 只能被與這個網頁在同一目錄或子目錄下得全部網頁訪問，而不能被其餘目錄下得網頁訪問（這句話有點繞，一會看個例子就好理解了）。

  • 其實建立cookie的方式和定義變量的方式有些類似，都須要使用 cookie 名稱和 cookie 值。同個網站能夠建立多個 cookie ，而多個 cookie 能夠存放在同一個cookie 文件中。

 

　　Cookie常見問題

  • cookie 存在兩種類型：

    • 你瀏覽的當前網站自己設置的 cookie

    • 來自在網頁上嵌入廣告或圖片等其餘域來源的 第三方 cookie (網站可經過使用這些 cookie 跟蹤你的使用信息)

  • 剛剛基礎知識裏面有說到 cookie 生命週期的問題，其實 cookie 大體可分爲兩種狀態：

    • 臨時性質的cookie。當前使用的過程當中網站會儲存一些你的我的信息，當瀏覽器關閉後這些信息也會從計算機中刪除

    • 設置失效時間的cookie。就算瀏覽器關閉了，這些信息業依然會在計算機中。如 登陸名稱和密碼，這樣無須在每次到特定站點時都進行登陸。這種cookie 可在計算機中保留幾天、幾個月甚至幾年

  • cookie 有兩種清除方式：

    • 經過瀏覽器工具清除 cookie (有第三方的工具，瀏覽器自身也有這種功能)

    • 經過設置 cookie 的有效期來清除 cookie

    • 注：刪除 cookie 有時可能致使某些網頁沒法正常運行

  • 瀏覽器能夠經過設置來接受和拒絕訪問 cookie。

  • 出於功能和性能的緣由考慮，建議儘可能下降 cookie 的使用數量，而且要儘可能使用小 cookie。

  • 關於cookie編碼的細節問題將會在cookie高級篇中單獨介紹。

  • 假如是本地磁盤中的頁面，chrome的控制檯是沒法用JavaScript讀寫操做 cookie 的，解決辦法...換一個瀏覽器^_^。

 

　　Cookie基礎用法

　　一.簡單的存取操做

　　在使用JavaScript存取 cookie 時，必需要使用Document對象的 cookie 屬性；一行代碼介紹如何建立和修改一個 cookie ：

　　document.cookie  = 'username=Darren'

　　以上代碼中'username'表示 cookie 名稱，'Darren'表示這個名稱對應的值。假設 cookie 名稱並不存在，那麼就是建立一個新的 cookie；若是存在就是修改了這個 cookie 名稱對應的值。若是要屢次建立 cookie ，重複使用這個方法便可。

       添加一個cookie：addcookie(name,value,expireHours)
　　該函數接收3個參數：cookie名稱，cookie值，以及在多少小時後過時。這裏約定expireHours爲0時不設定過時時間，即當瀏覽器關閉時cookie自動消失。該函數實現以下：

<script language="JavaScript" type="text/JavaScript">
    function addcookie(name,value,expireHours){
        var cookieString=name+"="+escape(value)
        if(expireHours>0){var date=new Date();;//判斷是否設置過時時間
        date.setTime(date.getTime+expireHours*3600*1000);
        cookieString=cookieString+"; 
        expire="+date.toGMTString();
    }
    document.cookie=cookieString;}
</script>

　　二.cookie的讀取操做

　　要精確的對 cookie 進行讀取其實很簡單，就是對字符串進行操做。從w3school上copy這段代碼來作分析：

 function getCookie(c_name){
　　　　if (document.cookie.length>0){　　//先查詢cookie是否爲空，爲空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//經過String對象的indexOf()來檢查這個
                                                           //cookie是否存在，不存在就爲 -1　　
　　　　　　if (c_start!=-1){ 
　　　　　　　　c_start=c_start + c_name.length+1　　//最後這個+1其實就是表示"="號啦，這樣就獲取到
                                                  //了cookie值的開始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　//其實我剛看見indexOf()第二個參數的時
                                                         //候猛然有點暈，後來想起來表示指定的開
                                                         //始索引的位置...這句是爲了獲得值的結束位
                                           //置。由於須要考慮是不是最後一項，因此經過";"號是否存在來判斷
　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　//經過substring()獲得
                                    //了值。想了解unescape()得先知道escape()是作什麼的，都是很重
                                   //要的基礎，想了解的能夠搜索下，在文章結尾處也會進行講解cookie編碼細節
　　　　　　} 
　　　　}
　　　　return ""
　　}　　

　　固然想實現讀取cookie的方法還有很多，好比數組，正則等，這裏就不往細說了。

 

　　三.設置cookie的有效期

　　文章中經常出現的 cookie 的生命週期也就是有效期和失效期，即 cookie 的存在時間。在默認的狀況下，cookie 會在瀏覽器關閉的時候自動清除，可是咱們能夠經過expires來設置 cookie 的有效期。語法以下：

　　document.cookie = "name=value;expires=date"

　　上面代碼中的date值爲GMT(格林威治時間)格式的日期型字符串，生成方式以下：

 var _date = new Date();
　　_date.setDate(_date.getDate()+30);
　　_date.toGMTString();

　　上面三行代碼分解爲幾步來看：

  • 經過new生成一個Date的實例，獲得當前的時間；

  • getDate()方法獲得當前本地月份中的某一天，接着加上30就是我但願這個cookie能過在本地保存30天；

  • 接着經過setDate()方法來設置時間；

  • 最後 用toGMTString()方法把Date對象轉換爲字符串，並返回結果

　　經過下面這個完整的函數來講明在建立 cookie 的過程當中咱們須要注意的地方 - 從w3school複製下來的。建立一個在 cookie 中存儲信息的函數：

 　 function setCookie(c_name, value, expiredays){
　　　　var exdate=new Date();
　　　　exdate.setDate(exdate.getDate() + expiredays);
 　　　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : 
                                                           ";expires="+exdate.toGMTString());
 　　}
　　使用方法：setCookie('username','Darren',30)

　　如今咱們這個函數是按照天數來設置cookie的有效時間，若是想以其餘單位（如：小時）來設置，那麼改變第三行代碼便可：

　　exdate.setHours(exdate.getHours() + expiredays);

　　這樣設置之後的cookie有效期就是按照小時爲單位的。

　　常見問題中有提到清除 cookie 的兩種方法，如今要說的是使 cookie 失效，經過把有效期的時間設置爲一個已過時的時間。既然已經有了設置有效期的方法，那麼設置失效期的方法就請感興趣的朋友本身動手了^_^。下面繼續比較深的cookie話題。

四. 獲取cookie和刪除的另外一種寫法

function getCookie(name)//取cookies函數        
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr != null) return unescape(arr[2]); return null;
}
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();
}

 

　　Cookie 高級篇

　　一.cookie 路徑概念

　　在基礎知識中有提到 cookie 有域和路徑的概念，如今來介紹路徑在 cookie 中的做用。

　　cookie 通常都是因爲用戶訪問頁面而被建立的，但是並非只有在建立 cookie 的頁面才能夠訪問這個 cookie。

　　默認狀況下，只有與建立 cookie 的頁面在同一個目錄或子目錄下的網頁才能夠訪問，這個是由於安全方面的考慮，形成不是全部頁面均可以隨意訪問其餘頁面建立的 cookie。舉個例子：

　　在 "http://www.cnblogs.com/Darren_code/" 這個頁面建立一個cookie，那麼在"/Darren_code/"這個路徑下的頁面如： "http://www.cnblogs.com/Darren_code/archive/2011/11/07/Cookie.html"這個頁面默 認就能取到cookie信息。

　　可在默認狀況下， "http://www.cnblogs.com"或者 "http://www.cnblogs.com/xxxx/" 就不能夠訪問這個 cookie（光看沒用，實踐出真理^_^）。

　　那麼如何讓這個 cookie 能被其餘目錄或者父級的目錄訪問類，經過設置 cookie 的路徑就能夠實現。例子以下：

　　document.cookie = "name=value;path="
　　document.cookie = "name=value;expires=date;path="

 　　紅色字體path就是 cookie 的路徑，最經常使用的例子就是讓 cookie 在跟目錄下,這樣不論是哪一個子頁面建立的 cookie，全部的頁面均可以訪問到了:

　　document.cookie = "name=Darren;path=/"

　　 

　　二.cookie 域概念

　　路徑能解決在同一個域下訪問 cookie 的問題，我們接着說 cookie 實現同域之間訪問的問題。語法以下：

　　document.cookie = "name=value;path=path;domain=domain"

　　紅色的domain就是設置的 cookie 域的值。

　　例如 "www.qq.com" 與 "sports.qq.com" 公用一個關聯的域名"qq.com"，咱們若是想讓 "sports.qq.com" 下的cookie被 "www.qq.com" 訪問，咱們就須要用到 cookie 的domain屬性，而且須要把path屬性設置爲 "/"。例：

　　document.cookie = "username=Darren;path=/;domain=qq.com"

　　注：必定的是同域之間的訪問，不能把domain的值設置成非主域的域名。

 

　　三.cookie 安全性

　　一般 cookie 信息都是使用HTTP鏈接傳遞數據，這種傳遞方式很容易被查看，因此 cookie 存儲的信息容易被竊取。假如 cookie 中所傳遞的內容比較重要，那麼就要求使用加密的數據傳輸。

　　因此 cookie 的這個屬性的名稱是「secure」，默認的值爲空。若是一個 cookie 的屬性爲secure，那麼它與服務器之間就經過HTTPS或者其它安全協議傳遞數據。語法以下：

　　document.cookie = "username=Darren;secure"

　　把cookie設置爲secure，只保證 cookie 與服務器之間的數據傳輸過程加密，而保存在本地的 cookie文件並不加密。若是想讓本地cookie也加密，得本身加密數據。

　　注：就算設置了secure 屬性也並不表明他人不能看到你機器本地保存的 cookie 信息，因此說到底，別把重要信息放cookie就對了，囧...

　　 

　　四.cookie 編碼細節

　　本來來想在常見問題那段介紹cookie編碼的知識，由於若是對這個不瞭解的話編碼問題確實是一個坑，因此仍是詳細說說。

　　在輸入cookie信息時不能包含空格，分號，逗號等特殊符號，而在通常狀況下，cookie 信息的存儲都是採用未編碼的方式。因此，在設置 cookie 信息之前要先使用escape()函數將 cookie 值信息進行編碼，在獲取到 cookie 值得時候再使用unescape()函數把值進行轉換回來。如設置cookie時：

　　document.cookie = name + "="+ escape (value)

　　再看看基礎用法時提到過的getCookie()內的一句：

　　return unescape(document.cookie.substring(c_start,c_end))

　　這樣就不用擔憂由於在cookie值中出現了特殊符號而致使 cookie 信息出錯了。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程