天天看點

javascript 操作Cookie

1、javascript說明

Cookie 基礎知識

  • cookie 是有大小限制的,每個 cookie 所存放的資料不能超過4kb,如果 cookie 字元串的長度超過4kb,則該屬性将傳回空字元串。
  • 由于 cookie 最終都是以檔案形式存放在用戶端計算機中,是以檢視和修改 cookie 都是很友善的,這就是為什麼常說 cookie 不能存放重要資訊的原因。
  • 每個 cookie 的格式都是這樣的:<cookie名>=<值>;名稱和值都必須是合法的标示符。
  • 每個網站下面最多儲存20個cookie,20個cookie是20個鍵值對,
  • cookie 是存在 有效期的。在預設情況下,一個 cookie 的生命周期就是在浏覽器關閉的時候結束。如果想要 cookie 能在浏覽器關掉之後還可以使用,就必須要為該 cookie 設定有效期,也就是 cookie 的失效日期。
  • alert(typeof document.cookie)  結果是 string,曾經我以為是array,還鬧過笑話…囧
  • cookie 有域和路徑這個概念。域就是domain的概念,因為浏覽器是個注意安全的環境,是以不同的域之間是不能互相通路 cookie 的(當然可以通過特殊設定的達到 cookie 跨域通路)。路徑就是routing的概念,一個網頁所建立的 cookie 隻能被與這個網頁在同一目錄或子目錄下得所有網頁通路,而不能被其他目錄下得網頁通路(這句話有點繞,一會看個例子就好了解了)。
  • 其實建立cookie的方式和定義變量的方式有些相似,都需要使用 cookie 名稱和 cookie 值。同個網站可以建立多個 cookie ,而多個 cookie 可以存放在同一個cookie 檔案中。
  • Cookie 常見問題
    • cookie 存在兩種類型:
    1. 你浏覽的目前網站本身設定的 cookie
    2. 來自在網頁上嵌入廣告或圖檔等其他域來源的 第三方 cookie (網站可通過使用這些 cookie 跟蹤你的使用資訊)
    • 剛剛基礎知識裡面有說到 cookie 生命周期的問題,其實 cookie 大緻可分為兩種狀态:
    1. 臨時性質的cookie。目前使用的過程中網站會儲存一些你的個人資訊,當浏覽器關閉後這些資訊也會從計算機中删除
    2. 設定失效時間的cookie。就算浏覽器關閉了,這些資訊業依然會在計算機中。如 登入名稱和密碼,這樣無須在每次到特定站點時都進行登入。這種cookie 可在計算機中保留幾天、幾個月甚至幾年
    • cookie 有兩種清除方式:
    1. 通過浏覽器工具清除 cookie (有第三方的工具,浏覽器自身也有這種功能)
    2. 通過設定 cookie 的有效期來清除 cookie
    3. 注:删除 cookie 有時可能導緻某些網頁無法正常運作
    • 浏覽器可以通過設定來接受和拒絕通路 cookie。
    • 出于功能和性能的原因考慮,建議盡量降低 cookie 的使用數量,并且要盡量使用小 cookie。
    • 關于cookie編碼的細節問題将會在cookie進階篇中單獨介紹。
    • 假如是本地磁盤中的頁面,chrome的控制台是無法用JavaScript讀寫操作 cookie 的,解決辦法…換一個浏覽器。

javascript設定cookie

document.cookie="username=zhangsan";//設定cookie

設定cookie的有效期

我們在開始說cookie的生命周期也就是有效期和失效期,即cookie的存在時間。在預設情況下,cookie會在浏覽器關閉的時候自動清除,但是我們可以通過expires倆設定cookie的有效期,文法如下:

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

上面的時間生成方法如下:

var d=new Date();//得到目前時間

d.setDate(d.getDate()+30);//d.getDate()得到本地月份的某一天,接着加上30,就是希望cookie能在本地儲存30天,然後通過使用setDate()來設定時間

d.toDateString();//将其轉化為字元創,并傳回結果

下面通過一個完整的函數來說一下:

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)

在這兒也可以不使用三目運算符,

var tmp+=c_name+"="+escape(value);

if(expiredays)

tmp+=" ;expires="+exdate.toDateString();

上面例子是我們安裝天數來設定cookie的,如果想要安裝小時設定cookie,則如下:

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

其他,年,月,分同上。

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 的路徑就可以實作。例子如下:

1

2

document.cookie =

"name=value;path=path"

document.cookie =

"name=value;expires=date;path=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 資訊出錯了。

讀取Cookie

 function GetCookie(cname) {

            if (document.cookie.length > 0) {//首先判斷cookie是否存在

                c_start = document.cookie.indexOf(cname + "="); //通過String對象的indexOf()來檢查這個cookie是否存在,不存在就為 -1

                if (c_start != -1) {

                    c_start = c_start + cname.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()得到了值。想了解

                }

            }

            return "";

        }

        //注:讀取cookie的方法還可以對cookie進行分割字元創,使用數組,或者使用正則

通過分隔分号加空格符号,就可以獲得各個 cookie,再通過分隔等号,就可以得出各個 cookie 的名稱和值。

  cookie 的子鍵,隻是表現在 cookieValue 上,一個子鍵的結構是:子鍵名稱=子鍵值,多個子鍵之間用 & 連接配接起來。比如:

  cookieName1=子鍵名稱1=子鍵值1&子鍵名稱2=子鍵值2

document.cookie = "N1=1; path=/path/"; 

document.cookie = "N1=2; path=/paTH/";

同名的 cookie,不同的 domain 或不同的 path,屬不同的 cookie;

  同名的 cookie,相同的 domain 且相同的 path,不同的 expires,屬同一個 cookie。

  cookie 有路徑--path,表示哪些路徑下的檔案有權限讀取該 cookie。

  path 應該以 "/" 結尾,同名 cookie,不同 path,屬不同的 cookie

document.cookie =

"N1=1; path=/path/"

document.cookie =

"N1=2; path=/paTH/"

;

document.cookie =

"N1=1; path=/path/"

document.cookie =

"N1=2; path=/paTH/"

;

  這是兩個不同的 cookie,因為 path 屬性值大小寫不同,如果我們在位址欄輸入的是 path,那麼就讀取第一個 N1,如果我們輸入的是 paTH,那麼就讀取第二個 N1

  path 不可讀

  同 expires 一樣,path 隻可寫,不可讀。

  path 不可更改

  同 expires 不一樣,如果我們試圖更改 path,那麼實際上我們是另外寫了一個 cookie,而不是更改了 path 值。

  path 權限有繼承性

  假如指定了 /test/ 目錄有權限讀取某 cookie,那麼 /test/ 之下的目錄 /test/t/ 也有權限讀取該 cookie。

  cookie 有失效日期--expires,如果還沒有過失效期,即使重新啟動電腦,cookie 仍然不會丢失,如果沒有指定 expires 值,那麼在關閉浏覽器時,cookie 即失效。

 在 JS(JavaScript) 中使用 expires 時應該和 cookie 同時寫入,如:

輕按兩下代碼全選

document.cookie =

"clr=red; expires="

+ expiresDate;

document.cookie = "clr=red; expires=" + expiresDate;

  而如下寫法是不正确的:

3

document.cookie =

"clr=red"

document.cookie =

"expires="

+ expiresDate;

document.cookie = "clr=red"; 

document.cookie = "expires=" + expiresDate;

  這樣寫會形成兩個 cookie,第二個 cookie 的名稱是 expires,兩個 cookie 均沒有指定失效日期。

  expires 不可讀

設定多個cookie

//設定多個cookie 

function SetMultiCookie() {

            var d = new Date();

            d.setFullYear(2013, 1, 10);

            var d1 = new Date();

            d1.setFullYear(2013, 8, 15);

            var d2 = new Date();

            d2.setMonth(6, 10);

            document.cookie = "username=zhan" + ";expires=" + d.toDateString();

            document.cookie = "uname=wangwu123;"+";;expires=" + d.toDateString()+";";

            document.cookie = "firstname=zhangsan "+";;"+";expires=" + d1.toDateString()+";";

            document.cookie = "lastname=qiangqi"+";"+";;expires=" + d2.toDateString();

繼續閱讀