js中的cookie使用和vue-cookie的使用


在HTTP協議的定義中,采用了一種機制來記錄客戶端和服務器端交互的信息,這種機制被稱為cookie,cookie規范定義了服務器和客戶端交互信息的格式、生存期、使用范圍、安全性。

 

在JavaScript中可以通過 document.cookie 來讀取或設置這些信息。由於 cookie 多用在客戶端和服務端之間進行通信,所以除了JavaScript以外,服務端的語言(如PHP)也可以存取 cookie。

 

Cookie詳解

 

Cookie在遠程瀏覽器端存儲數據並以此跟蹤和識別用戶的機制。從實現上說,Cookie是存儲在客戶端上的一小段數據,瀏覽器(即客戶端)通過HTTP協議和服務器端進行Cookie交互。

 

Cooke獨立於語言存在,嚴格地說,Cookie並不是由PHP、Java等語言實現的,而是由這些語言對Cookie進行間接操作,即發送HTTP指令,瀏覽器收到指令便操作Cookie並返回給服務器。因此,Cookie是由瀏覽器實現和管理的。舉例說,PHP並沒有真正設置過Cookie,只是發出指令讓瀏覽器來做這件事。PHP中可以使用setcookie() 或 setrawcookie() 函數設置Cookie。setcookie()最后一個參數HttpOnly設置了后,JavaScript就無法讀取到這個Cookie。

 

設置Cookie時需注意:①函數有返回值,false失敗,true成功,成功僅供參考,不代表客戶端一定能接收到;②PHP設置的Cookie不能立即生效,要等下一個頁面才能看到(Cookie從服務器傳給瀏覽器,下個頁面瀏覽器才能把設置的Cookie傳回給服務器);如果是JavaScript設置的,是立即生效的;③Cookie沒有顯示的刪除函數,可以設置expire過期時間,自動觸發瀏覽器的刪除機制。

 

Cookie是HTTP頭的一部分,即現發送或請求Cookie,才是data域;setcookie()等函數必須在數據之前調用,這和header() 函數是相同的。不過也可以使用輸出緩沖函數延遲腳本的輸出,知道設置好所有Cookie和其他HTTP標頭。

 

Cookie通常用來存儲一些不是很敏感的信息,或者進行登錄控制,也可用來記住用戶名、記住免密碼登錄、防止刷票等。每個域名下允許的Cookie是有限制的,根據瀏覽器這個限制也不同。Cookie不是越多越好,它會增加寬帶,增加流量消耗,所以不要濫用Cookie;不要把Cookie當作客戶端的存儲器來用。一個域名的每個Cookie限制以4千字節(KB)鍵值對的形式存儲。

 

還有一種Cookie是Flash創建的,成為Flash Shard Object,又稱Flash Cookie,即使清空瀏覽器所有隱私數據,這類頑固的Cookie還會存在硬盤上,因為它只受Flash管理,很多網站采用這種技術識別用戶。

 

Cookie跨域,主要是為了統一應用平台,實現單點登錄;需使用P3P協議(Platform for Privacy Preferences),通過P3P使用戶自己可以指定瀏覽器的隱私策略,達到存儲第三方Cookie的目的,只需要在響應用戶請求時,在HTTP的頭信息中增加關於P3P的配置信息就可以了。Cookie跨域涉及兩個不同的應用,習慣上稱為第一方和第三方。第三方通常是來自別人的廣告、或Iframe別的網站的URL,這些第三方網站可能使用的Cookie。

 

Cookie格式

 

Cookie中保存的信息都是文本信息,在客戶端和服務器端交互過程中,cookie信息被附加在HTTP消息頭中傳遞,cookie的信息由鍵/值對組成。下面是一個HTTP頭中cookie的例子:

 

Set-Cookie: key = value; Path=/

 

Cookie中存放的信息包含cookie本身屬性和用戶自定義屬性,一個cookie只能包含一個自定義鍵/值對。Cookie本身屬性有”Comment” 、”Domain”、”Max-Age”、”Path”、”Secure”、”Version”。

 

Comment 屬性是cookie的產生着對該cookie的描述;

 

Domain 屬性定義可訪問該cookie的域名,對一些大的網站,如果希望cookie可以在子網站中共享,可以使用該屬性。例如設置Domain為 .bigsite.com ,則sub1.bigsite.com和sub2.bigsite.com都可以訪問已保存在客戶端的cookie,這時還需要將Path設置為/。

 

Max-Age 屬性定義cookie的有效時間,用秒計數,當超過有效期后,cookie的信息不會從客戶端附加在HTTP消息頭中發送到服務端。

 

Path 屬性定義網站上可以訪問cookie的頁面的路徑,缺省狀態下Path為產生cookie時的路徑,此時cookie可以被該路徑以及其子路徑下的頁面訪問;可以將Path設置為/,使cookie可以被網站下所有頁面訪問。

 

Secure 屬性值定義cookie的安全性,當該值為true時必須是HTTPS狀態下cookie才從客戶端附加在HTTP消息中發送到服務端,在HTTP時cookie是不發送的;Secure為false時則可在HTTP狀態下傳遞cookie,Secure缺省為false。

 

Version 屬性定義cookie的版本,由cookie的創建者定義。

 

Cookie的創建

 

Cookie可以在服務器端創建,然后cookie信息附加在HTTP消息頭中傳到客戶端,如果cookie定義了有效期,則本保存在客戶端本地磁盤。保存cookie的文件是一個文本文件,因此不用擔心此文件中的內容會被執行而破壞客戶的機器。支持Web端開發的語言都有創建cookie的方法或函數,以及設置cookie屬性和添加自定義屬性的方法或函數,最后是將cookie附加到返回客戶端的HTTP消息頭中。

 

創建cookie時如果不指定生存有效時間,則cookie只在瀏覽器關閉前有效,cookie會在服務器端和客戶端傳輸,但是不會保存在客戶機的磁盤上,打開新的瀏覽器將不能獲得原先創建的cookie信息。

 

Cookie信息保存在本地時會保存到當前登錄用戶專門目錄下,保存的cookie文件名中會包含創建cookie所在頁面網站的域名,當瀏覽器再次連接該網站時,會從本機cookie存放目錄下選出該網站的有效cookie,將保存在其中的信息附加在HTTP消息頭中發送到服務器端,服務器端程序就可根據上次保存在cookie的信息為訪問客戶提供“記憶”或個性化服務。

 

Cookie除了可以在服務器端創建外,也可以在客戶端的瀏覽器中用客戶端腳本(如javascript)創建。客戶端創建的cookie的性質和服務器端創建的cookie一樣,可以保存在本地,也可以被傳送到服務器端被服務器程序讀取。

 

Cookie 基礎知識

 

  1. cookie 是有大小限制的,大多數瀏覽器支持最大為 4096 字節的 Cookie(具體會有所差異,可以使用這個好用的工具:http://browsercookielimits.squawky.net/ 進行測試);如果 cookie 字符串的長度超過最大限制,則該屬性將返回空字符串。

  2. 由於 cookie 最終都是以文件形式存放在客戶端計算機中,所以查看和修改 cookie 都是很方便的,這就是為什么常說 cookie 不能存放重要信息的原因。

  3. 每個 cookie 的格式都是這樣的:cookieName = Vaue;名稱和值都必須是合法的標示符。

  4. cookie 是存在 有效期的。在默認情況下,一個 cookie 的生命周期就是在瀏覽器關閉的時候結束。如果想要 cookie 能在瀏覽器關掉之后還可以使用,就必須要為該 cookie 設置有效期,也就是 cookie 的失效日期。

  5. alert(typeof document.cookie)結果是 string.

  6. cookie 有域和路徑這個概念。域就是domain的概念,因為瀏覽器是個注意安全的環境,所以不同的域之間是不能互相訪問 cookie 的(當然可以通過特殊設置的達到 cookie 跨域訪問)。路徑就是routing的概念,一個網頁所創建的 cookie 只能被與這個網頁在同一目錄或子目錄下得所有網頁訪問,而不能被其他目錄下得網頁訪問(這句話有點繞,一會看個例子就好理解了)。

  7. 其實創建cookie的方式和定義變量的方式有些相似,都需要使用 cookie 名稱和 cookie 值。同個網站可以創建多個 cookie ,而多個 cookie 可以存放在同一個cookie 文件中。

  8. cookie 存在兩種類型:①:你瀏覽的當前網站本身設置的 cookie ②來自在網頁上嵌入廣告或圖片等其他域來源的 第三方 cookie (網站可通過使用這些 cookie 跟蹤你的使用信息)

  9. cookie 有兩種清除方式:①:通過瀏覽器工具清除 cookie (有第三方的工具,瀏覽器自身也有這種功能) ②通過設置 cookie 的有效期來清除 cookie.注:刪除 cookie 有時可能導致某些網頁無法正常運行。

  10. 瀏覽器可以通過設置來接受和拒絕訪問 cookie。出於功能和性能的原因考慮,建議盡量降低 cookie 的使用數量,並且要盡量使用小 cookie。

 

Cookie的使用

 

從cookie的定義可以看到,cookie一般用於采用HTTP作為進行信息交換協議的客戶端和服務器端用於記錄需要持久化的信息。一般是由服務器端創建要記錄的信息,然后傳遞到客戶端,由客戶端從HTTP消息中取出信息,保存在本機磁盤上。當客戶端再次訪問服務器端時,從本機磁盤上讀出原來保存的信息,附加到HTTP消息中發送給服務器端,服務器端從HTTP消息中讀取信息,根據實際應用的需求進行進一步的處理。

 

服務器端cookie的創建和再次讀取功能通常由服務器端編程語言實現,客戶端cookie的保存、讀取一般由瀏覽器來提供,並且對cookie的安全性方面可以進行設置,如是否可以在本機保存cookie。

 

由於cookie信息以明文方式保存在文本文件中,對一些敏感信息如口令、銀行帳號如果要保存在本地cookie文件中,最好采用加密形式。

 

與cookie類似的另一個概念是會話(Session),會話一般是記錄客戶端和服務器端從客戶端瀏覽器連接上服務器端到關閉瀏覽器期間的持久信息。會話一般保存在內存中,不保存到磁盤上。會話可以通過cookie機制來實現,對於不支持cookie的客戶端,會話可以采用URL重寫方式來實現。可以將會話理解為內存中的cookie。

 

使用會話會對系統伸縮性造成負面影響,當服務器端要在很多台服務器上同步復制會話對象時,系統性能會受到較大傷害,尤其會話對象較大時。這種情況下可以采用cookie,將需要記錄的信息保存在客戶端,每次請求時發送到服務器端,服務器端不保留狀態信息,避免在服務器端多台機器上復制會話而造成的性能下降。

 

Cookie 基本操作

 

對於 Cookie 得常用操作有,存取,讀取,以及設置有效期;具體可以參照 JavaScript 操作 Cookie 一文;但,近期在前端編碼方面,皆以Vue為沖鋒利器,所以就有用到一款插件 vue-cookie,其代碼僅30行,堪稱精妙,讀取操作如下:

 

set: function (name, value, days) {

    var d = new Date;

    d.setTime(d.getTime() + 24*60*60*1000*days);

    window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();

},

get: function (name) {

    var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');

    return v ? v[2] : null;

},

delete: function (name) {

    this.set(name, '', -1);

}

 

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連接傳遞數據,這種傳遞方式很容易被查看,在控制台下運行document.cookie,一目了然;所以 cookie 存儲的信息容易被竊取。假如 cookie 中所傳遞的內容比較重要,那么就要求使用加密的數據傳輸。所以 cookie 的這個屬性的名稱是“secure”,默認的值為空。如果一個 cookie 的屬性為secure,那么它與服務器之間就通過HTTPS或者其它安全協議傳遞數據。語法如下:

 

document.cookie = “username=Darren;secure”

 

把cookie設置為secure,只保證 cookie 與服務器之間的數據傳輸過程加密,而保存在本地的 cookie文件並不加密。如果想讓本地cookie也加密,得自己加密數據。

 

注: 就算設置了secure 屬性也並不代表他人不能看到你機器本地保存的 cookie 信息,所以說到底,別把重要信息放cookie就對了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM