實現(xiàn)的網頁布局,因此就被“誤用于”網頁布局了。
那么通過閱讀本文,你可以了解:
1.cookie是什么,cookie的屬性有哪些,如何設置cookie,cookie的缺點,和session的區(qū)別2.不再混淆cookie和webStorage,簡單介紹瀏覽器的本地存儲的兩種方式:sessionStorage和localStorage
1.cookie
1.1 cookie是什么
cookie是當你瀏覽某個網站的時候,由web服務器存儲在你的機器硬盤上的一個小的文本文件。它其中記錄了你的用戶名、密碼、瀏覽的網頁、停留的時間等等信息。當你再次來到這個網站時,web服務器會先看看有沒有它上次留下來的cookie。如果有的話,會讀取cookie中的內容,來判斷使用者,并送出相應的網頁內容,比如在頁面顯示歡迎你的標語,或者讓你不用輸入ID、密碼就直接登錄等等。
當客戶端要發(fā)送http請求時,瀏覽器會先檢查下是否有對應的cookie。有的話,則自動 地添加在request header中的cookie字段。注意,每一次的http請求時,如果有cookie,瀏覽器都會自動 帶上cookie發(fā)送給服務端。那么把什么數(shù)據放到cookie中就很重要了,因為很多數(shù)據并不是每次請求都需要發(fā)給服務端,畢竟會增加網絡開銷,浪費帶寬。所以對于那設置“每次請求都要攜帶的信息(最典型的就是身份認證信息)”就特別適合放在cookie中,其他類型的數(shù)據就不適合了。
簡單的說就是:
(1) cookie是以小的文本文件形式(即純文本),完全存在于客戶端;cookie保存了登錄的憑證 ,有了它,只需要在下次請求時帶著cookie發(fā)送,就不必再重新輸入用戶名、密碼等重新登錄了。
(2) 是設計用來在服務端 和客戶端 進行信息傳遞 的;
這里我簡單地畫了個圖,可以方便理解:
第一次請求時:
第一次請求
下一次請求時:
下一次請求
瀏覽器會把cookie放到請求頭一起提交給服務器,cookie攜帶了會話ID信息。服務器會根據cookie辨認用戶:由于cookie帶了會話的ID信息,可以通過cookie找到對應會話,通過判斷會話來判斷用戶狀態(tài)。
1.2 cookie的屬性
在瀏覽器的控制臺中,可以直接輸入:document.cookie來查看cookie。cookie是一個由鍵值對構成的字符串,每個鍵值對之間是“; ”即一個分號和一個空格隔開。
document.cookie
注意,這個方法只能獲取非 HttpOnly 類型的cookie
每個cookie都有一定的屬性,如什么時候失效,要發(fā)送到哪個域名,哪個路徑等等。這些屬性是通過cookie選項來設置的,cookie選項包括:expires、domain、path、secure、HttpOnly。在設置任一個cookie時都可以設置相關的這些屬性,當然也可以不設置,這時會使用這些屬性的默認值。在設置這些屬性時,屬性之間由一個分號和一個空格隔開。代碼示例如下:
"key=name; expires=Sat, 08 Sep 2018 02:26:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly"
cookie的屬性可以在控制臺查看:Application選項,左邊選擇Storage,最后一個就是cookie,點開即可查看。
Expires、Max Age:
Expires選項用來設置“cookie 什么時間內有效”。Expires其實是cookie失效日期,Expires必須是 GMT 格式的時間(可以通過 new Date().toGMTString()或者 new Date().toUTCString() 來獲得)。
new Date().toGMTString()或者 new Date().toUTCString()
如expires=Sat, 08 Sep 2018 02:26:00 GMT表示cookie將在2018年9月8日2:26分之后失效。對于失效的cookie瀏覽器會清空。如果沒有設置該選項,這樣的cookie稱為會話cookie。它存在內存中,當會話結束,也就是瀏覽器關閉時,cookie消失。
補充:
Expires是 http/1.0協(xié)議中的選項,在http/1.1協(xié)議中Expires已經由 Max age 選項代替,兩者的作用都是限制cookie 的有效時間。Expires的值是一個時間點(cookie失效時刻= Expires),而Max age的值是一個以秒為單位時間段(cookie失效時刻= 創(chuàng)建時刻+ Max age)。 另外, Max age的默認值是 -1(即有效期為 session ); Max age有三種可能值:負數(shù)、0、正數(shù)。負數(shù):有效期session;0:刪除cookie;正數(shù):有效期為創(chuàng)建時刻+ Max age
Domain和Path
Domain是域名,Path是路徑,兩者加起來就構成了 URL,Domain和Path一起來限制 cookie 能被哪些 URL 訪問。即請求的URL是Domain或其子域、且URL的路徑是Path或子路徑,則都可以訪問該cookie,例如:
某cookie的 Domain為“baidu.com”, Path為“/ ”,若請求的URL(URL 可以是js/html/img/css資源請求,但不包括 XHR 請求)的域名是“baidu.com”或其子域如“api.baidu.com”、“dev.api.baidu.com”,且 URL 的路徑是“/ ”或子路徑“/home”、“/home/login”,則都可以訪問該cookie。
補充:
發(fā)生跨域xhr請求時,即使請求URL的域名和路徑都滿足 cookie 的 Domain和Path,默認情況下cookie也不會自動被添加到請求頭部中。
Size
Cookie的大小
Secure
Secure選項用來設置cookie只在確保安全的請求中才會發(fā)送。當請求是HTTPS或者其他安全協(xié)議時,包含 Secure選項的 cookie 才能被發(fā)送至服務器。
默認情況下,cookie不會帶Secure選項(即為空)。所以默認情況下,不管是HTTPS協(xié)議還是HTTP協(xié)議的請求,cookie 都會被發(fā)送至服務端。但要注意一點,Secure選項只是限定了在安全情況下才可以傳輸給服務端,但并不代表你不能看到這個 cookie。
補充:
如果想在客戶端即網頁中通過 js 去設置Secure類型的 cookie,必須保證網頁是https協(xié)議的。在http協(xié)議的網頁中是無法設置secure類型cookie的。
httpOnly
這個選項用來設置cookie是否能通過 js 去訪問。默認情況下,cookie不會帶httpOnly選項(即為空),所以默認情況下,客戶端是可以通過js代碼去訪問(包括讀取、修改、刪除等)這個cookie的。當cookie帶httpOnly選項時,客戶端則無法通過js代碼去訪問(包括讀取、修改、刪除等)這個cookie。
在客戶端是不能通過js代碼去設置一個httpOnly類型的cookie的,這種類型的cookie只能通過服務端來設置。
可以在瀏覽器的控制臺中看出哪些cookie是httpOnly類型的,HTTP下帶綠色對勾的即是,如圖:
httponly
只要是httponly類型的,在控制臺通過document.cookie是獲取不到的,也不能進行修改。
之所以限制客戶端去訪問cookie,主要還是出于安全的目的。因為如果任何 cookie 都能被客戶端通過document.cookie獲取,那么假如合法用戶的網頁受到了XSS攻擊,有一段惡意的script腳本插到了網頁中,這個script腳本,通過document.cookie讀取了用戶身份驗證相關的 cookie,那么只要原樣轉發(fā)cookie,就可以達到目的了。
1.3 cookie的設置、讀取、刪除方法
cookie既可以由服務端來設置,也可以由客戶端來設置。
1.3.1 服務端設置cookie
前面1.1中介紹過,客戶端第一次向服務端請求時,在相應的請求頭中就有set-cookie字段,用來標識是哪個用戶。
下圖我是登錄騰訊云的某個頁面的響應頭截圖,可以看到響應頭中有兩個set-cookie字段,每段對應一個cookie,注意每個cookie放一個set-cookie字段中,不能將多個cookie放在一個set-cookie字段中。具體每個cookie設置了相關的屬性:expires、path、httponly,具體屬性含義可以結合1.2 cookie的屬性來看:
response headers
服務端設置cookie的范圍:
服務端可以設置cookie 的所有選項:expires、domain、path、secure、HttpOnly
1.3.2 客戶端設置cookie
cookie不像web Storage有setItem,getItem,removeItem,clear等方法,需要自己封裝。簡單地在瀏覽器的控制臺里輸入:
document.cookie="name=lynnshen; age=18"
但發(fā)現(xiàn)只添加了第一個cookie:"name=lynnshen",后面的cookie并沒有添加進來:
最簡單的設置多個cookie的方法就是重復執(zhí)行document.cookie = "key=name":
document.cookie = "name=lynnshen";
document.cookie = "age=18";
再看控制臺:
注意:
當name、domain、path 這3個字段都相同的時候,cookie會被覆蓋。
下面是我自己簡單封裝的設置、讀取、刪除cookie的方法:
設置cookie:
function setCookie(name,value,iDay){
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = name + "=" + value + ";expires=" + oDate;
}
讀取cookie,該方法簡單地認為cookie中只有一個“=”,即key=value,如有更多需求可以在此基礎上完善:
function getCookie(name){
//例如cookie是"username=abc; password=123"
var arr = document.cookie.split("; ");//用“;”和空格來劃分cookie
for(var i = 0 ;i < arr.length ; i++){
var arr2 = arr[i].split("=");
if(arr2[0] == name){
return arr2[1];
}
}
return "";//整個遍歷完沒找到,就返回空值
}
刪除cookie:
function removeCookie(name){
setCookie(name, "1", -1)//第二個value值隨便設個值,第三個值設為-1表示:昨天就過期了,趕緊刪除
}
1.4 cookie的缺點
cookie的缺點:
(1) 每個特定域名下的cookie數(shù)量有限:
IE6或IE6-(IE6以下版本):最多20個cookie
IE7或IE7+(IE7以上版本):最多50個cookie
FF:最多50個cookie
Opera:最多30個cookie
Chrome和safari沒有硬性限制
當超過單個域名限制之后,再設置cookie,瀏覽器就會清除以前設置的cookie。IE和Opera會清理近期最少使用的cookie,F(xiàn)F會隨機清理cookie;
(2) 存儲量太小,只有4KB;
(3) 每次HTTP請求都會發(fā)送到服務端,影響獲取資源的效率;
(4) 需要自己封裝獲取、設置、刪除cookie的方法;
1.5 cookie和session的區(qū)別
cookie是存在客戶端瀏覽器上,session會話存在服務器上。會話對象用來存儲特定用戶會話所需的屬性及配置信息。當用戶請求來自應用程序的web頁時,如果該用戶還沒有會話,則服務器將自動創(chuàng)建一個會話對象。當會話過期或被放棄后,服務器將終止該會話。cookie和會話需要配合,具體內容參見1.1節(jié)。
當cookie失效、session過期時,就需要重新登錄了。
2.瀏覽器本地存儲:
2.1 localStorage和sessionStorage
在較高版本的瀏覽器中,js提供了兩種存儲方式:sessionStorage和globalStorage。在H5中,用localStorage取代了globalStorage。
sessionStorage用于本地存儲一個會話中的數(shù)據,這些數(shù)據只有在同一個會話中的頁面才能訪問,并且當會話結束后,數(shù)據也隨之銷毀。所以sessionStorage僅僅是會話級別的存儲,而不是一種持久化的本地存儲。
localStorage是持久化的本地存儲,除非是通過js刪除,或者清除瀏覽器緩存,否則數(shù)據是永遠不會過期的。
瀏覽器的支持情況:IE7及以下版本不支持web storage,其他都支持。不過在IE5、IE6、IE7中有個userData,其實也是用于本地存儲。這個持久化數(shù)據放在緩存中,只有不清理緩存,就會一直存在。
2.2 web storage和cookie的區(qū)別
(1) web storages和cookie的作用不同,web storage是用于本地大容量存儲數(shù)據(web storage的存儲量大到5MB);而cookie是用于客戶端和服務端間的信息傳遞;
(2) web storage有setItem、getItem、removeItem、clear等方法,cookie需要我們自己來封裝setCookie、getCookie、removeCookie,具體可見1.3節(jié);
3.小結
本文縱向上深度介紹了cookie相關的知識,包括cookie的作用、各個屬性的用途、cookie的設置、缺點等等。橫向上,將cookie和會話、localStorage做了比較。如有問題,歡迎指正。
此文已由作者授權騰訊云+社區(qū)發(fā)布
搜索關注公眾號「云加社區(qū)」,第一時間獲取技術干貨,關注后回復1024 送你一份技術課程大禮包!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99905.html
摘要:以餃子為例,這時候需要準備好面粉,剁好的餡料,再調配好需要的配料,還得等面粉發(fā)酵完畢后和面。包好餃子放進蒸屜之中,蒸好后才能享用。與在自己家里面做不同,這里需要一個餃子的供應商,這就是基礎設施即服務。在與相關人士聊云計算的時候,有時會從他們的最終蹦出諸如IaaS、PaaS和SaaS等相關名詞,聽的人一頭霧水,而往往與你聊的人,也只能用一些專業(yè)名字來解釋,這樣一來,就更加疑惑了。那么IaaS、...
摘要:美團的目標很明確,那就是把萬外賣小哥清理一大半,只留下三四線城市靠人工配送。現(xiàn)在的美團以他核心的三大業(yè)務板塊,乘著大疫情時代股價飆升的東風,最高峰時期可以跟騰訊阿里這樣的互聯(lián)網巨頭相比較。 ...
willin
2021-10-09 09:43
評論0
收藏0
男| 高級講師
閱讀 3686· 2021-09-07 10:19
閱讀 3627· 2021-09-03 10:42
閱讀 3584· 2021-09-03 10:28
閱讀 2548· 2019-08-29 14:11
閱讀 809· 2019-08-29 13:54
閱讀 1594· 2019-08-29 12:14
閱讀 417· 2019-08-26 12:12
閱讀 3614· 2019-08-26 10:45