天天看點

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就對了。

作者:趙盼盼

出處:https://www.cnblogs.com/zhaopanpan/

本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。

⇩ 關注或點個喜歡就行 ^_^

關注我

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