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

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

 

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

 

Cookie詳解vue

 

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

 

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中保存的信息都是文本信息,在客戶端和服務器端交互過程當中,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就對了。

相關文章
相關標籤/搜索