1. cookie
1.1 什么是cookie
cookie 是存儲(chǔ)于訪問(wèn)者的計(jì)算機(jī)中的變量。每當(dāng)同一臺(tái)計(jì)算機(jī)通過(guò)瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí)，就會(huì)發(fā)送這個(gè) cookie。你可以使用 JavaScript 來(lái)創(chuàng)建和取回 cookie 的值。
眾所周知，Web協(xié)議（也就是HTTP）是一個(gè)無(wú)狀態(tài)的協(xié)議（HTTP1.0）。一個(gè)Web應(yīng)用由很多個(gè)Web頁(yè)面組成，每個(gè)頁(yè)面都有唯一的URL來(lái)定義。用戶在瀏覽器的地址欄輸入頁(yè)面的URL，瀏覽器就會(huì)向Web Server去發(fā)送請(qǐng)求。如下圖，瀏覽器向Web服務(wù)器發(fā)送了兩個(gè)請(qǐng)求，申請(qǐng)了兩個(gè)頁(yè)面。這兩個(gè)頁(yè)面的請(qǐng)求是分別使用了兩個(gè)單獨(dú)的HTTP連接。所謂無(wú)狀態(tài)的協(xié)議也就是表現(xiàn)在這里，瀏覽器和Web服務(wù)器會(huì)在第一個(gè)請(qǐng)求完成以后關(guān)閉連接通道，在第二個(gè)請(qǐng)求的時(shí)候重新建立連接。Web服務(wù)器并不區(qū)分哪個(gè)請(qǐng)求來(lái)自哪個(gè)客戶端，對(duì)所有的請(qǐng)求都一視同仁，都是單獨(dú)的連接。這樣的方式大大區(qū)別于傳統(tǒng)的（Client/Server）C/S結(jié)構(gòu),在那樣的應(yīng)用中，客戶端和服務(wù)器端會(huì)建立一個(gè)長(zhǎng)時(shí)間的專用的連接通道。正是因?yàn)橛辛藷o(wú)狀態(tài)的特性，每個(gè)連接資源能夠很快被其他客戶端所重用，一臺(tái)Web服務(wù)器才能夠同時(shí)服務(wù)于成千上萬(wàn)的客戶端。
[圖片上傳失敗...(image-566aea-1511517054562)]
但是我們通常的應(yīng)用是有狀態(tài)的。先不用提不同應(yīng)用之間的SSO(單點(diǎn)登錄)，在同一個(gè)應(yīng)用中也需要保存用戶的登錄身份信息。例如用戶在訪問(wèn)頁(yè)面1的時(shí)候進(jìn)行了登錄，但是剛才也提到，客戶端的每個(gè)請(qǐng)求都是單獨(dú)的連接，當(dāng)客戶再次訪問(wèn)頁(yè)面2的時(shí)候，如何才能告訴Web服務(wù)器，客戶剛才已經(jīng)登錄過(guò)了呢？瀏覽器和服務(wù)器之間有約定：通過(guò)使用cookie技術(shù)來(lái)維護(hù)應(yīng)用的狀態(tài)。Cookie是可以被Web服務(wù)器設(shè)置的字符串，并且可以保存在瀏覽器中。如下圖所示，當(dāng)瀏覽器訪問(wèn)了頁(yè)面1時(shí)，web服務(wù)器設(shè)置了一個(gè)cookie，并將這個(gè)cookie和頁(yè)面1一起返回給瀏覽器，瀏覽器接到cookie之后，就會(huì)保存起來(lái)，在它訪問(wèn)頁(yè)面2的時(shí)候會(huì)把這個(gè)cookie也帶上，Web服務(wù)器接到請(qǐng)求時(shí)也能讀出cookie的值，根據(jù)cookie值的內(nèi)容就可以判斷和恢復(fù)一些用戶的信息狀態(tài)。
[圖片上傳失敗...(image-b22be-1511517054562)]
1.2 cookie組成
cookie是由名稱、內(nèi)容、作用路徑、作用域、協(xié)議、生存周期組成(若不設(shè)置過(guò)期時(shí)間，則表示這個(gè)cookie的生命期為瀏覽器會(huì)話期間，關(guān)閉瀏覽器窗口，cookie就消失。這種生命期為瀏覽器會(huì)話期的cookie被稱為會(huì)話cookie)，另外還有個(gè)HttpOnly屬性，HttpOnly屬性很重要，如果您在cookie中設(shè)置了HttpOnly屬性，那么通過(guò)js腳本(document.cookie)將無(wú)法讀取到cookie信息，這樣能一定程度上的防止XSS攻擊，關(guān)于XSS可以看我之前的文章--XSS攻擊及防御。Tomcat服務(wù)器設(shè)置的JSESSIONID就是HttpOnly的。
[圖片上傳失敗...(image-c627ed-1511517054562)]
1.3 javascript創(chuàng)建和存儲(chǔ) cookie
在這個(gè)例子中我們要?jiǎng)?chuàng)建一個(gè)存儲(chǔ)訪問(wèn)者名字的 cookie。當(dāng)訪問(wèn)者首次訪問(wèn)網(wǎng)站時(shí)，他們會(huì)被要求填寫姓名。名字會(huì)存儲(chǔ)于 cookie 中。當(dāng)訪問(wèn)者再次訪問(wèn)網(wǎng)站時(shí)，他們就會(huì)收到歡迎詞。
首先，我們會(huì)創(chuàng)建一個(gè)可在 cookie 變量中存儲(chǔ)訪問(wèn)者姓名的函數(shù)：
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())
}
上面這個(gè)函數(shù)中的參數(shù)存有 cookie 的名稱、值以及過(guò)期天數(shù)。
在上面的函數(shù)中，我們首先將天數(shù)轉(zhuǎn)換為有效的日期，然后，我們將 cookie 名稱、值及其過(guò)期日期存入 document.cookie 對(duì)象。
之后，我們要?jiǎng)?chuàng)建另一個(gè)函數(shù)來(lái)檢查是否已設(shè)置 cookie：
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
上面的函數(shù)首先會(huì)檢查 document.cookie 對(duì)象中是否存有 cookie。假如 document.cookie 對(duì)象存有某些 cookie，那么會(huì)繼續(xù)檢查我們指定的 cookie 是否已儲(chǔ)存。如果找到了我們要的 cookie，就返回值，否則返回空字符串。
最后，我們要?jiǎng)?chuàng)建一個(gè)函數(shù)，這個(gè)函數(shù)的作用是：如果 cookie 已設(shè)置，則顯示歡迎詞，否則顯示提示框來(lái)要求用戶輸入名字。
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
這是所有的代碼：
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
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())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
2. session
session機(jī)制是一種服務(wù)器端的機(jī)制，服務(wù)器使用一種類似于散列表的結(jié)構(gòu)（也可能就是使用散列表）來(lái)保存信息。
當(dāng)程序需要為某個(gè)客戶端的請(qǐng)求創(chuàng)建一個(gè)session時(shí)，服務(wù)器首先檢查這個(gè)客戶端的請(qǐng)求里是否已包含了一個(gè)session標(biāo)識(shí)（稱為session id），如果已包含則說(shuō)明以前已經(jīng)為此客戶端創(chuàng)建過(guò)session，服務(wù)器就按照session id把這個(gè)session檢索出來(lái)使用（檢索不到，會(huì)新建一個(gè)），如果客戶端請(qǐng)求不包含session id，則為此客戶端創(chuàng)建一個(gè)session并且生成一個(gè)與此session相關(guān)聯(lián)的session id，session id的值應(yīng)該是一個(gè)既不會(huì)重復(fù)，又不容易被找到規(guī)律以仿造的字符串，這個(gè)session id將被在本次響應(yīng)中返回給客戶端保存。保存這個(gè)session id的方式可以采用cookie，這樣在交互過(guò)程中瀏覽器可以自動(dòng)的按照規(guī)則把這個(gè)標(biāo)識(shí)發(fā)送給服務(wù)器。一般這個(gè)cookie的名字都是類似于SEEESIONID。但cookie可以被人為的禁止，則必須有其他機(jī)制以便在cookie被禁止時(shí)仍然能夠把session id傳遞回服務(wù)器。
經(jīng)常被使用的一種技術(shù)叫做URL重寫，就是把session id直接附加在URL路徑的后面。還有一種技術(shù)叫做表單隱藏字段。就是服務(wù)器會(huì)自動(dòng)修改表單，添加一個(gè)隱藏字段，以便在表單提交時(shí)能夠把session id傳遞回服務(wù)器。比如：
<form name="testform" action="/xxx">
< input type="hidden" name="jsessionid" value="ByOK3vjFD75aPnrF7C2HmdnV6QZcEbzWoWiBYEnLerjQ99zWpBng!-145788764">
< input type="text">
< /form>
實(shí)際上這種技術(shù)可以簡(jiǎn)單的用對(duì)action應(yīng)用URL重寫來(lái)代替。
3. cookie 和session 的區(qū)別：
- cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
- cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙
考慮到安全應(yīng)當(dāng)使用session。 - session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問(wèn)增多，會(huì)比較占用你服務(wù)器的性能
考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。 - 單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
- 所以個(gè)人建議：
- 將登陸信息等重要信息存放為SESSION
- 其他信息如果需要保留，可以放在COOKIE中
- session保存在服務(wù)器，客戶端不知道其中的信息；cookie保存在客戶端，服務(wù)器能夠知道其中的信息。
- session中保存的是對(duì)象，cookie中保存的是字符串。
- session不能區(qū)分路徑，同一個(gè)用戶在訪問(wèn)一個(gè)網(wǎng)站期間，所有的session在任何一個(gè)地方都可以訪問(wèn)到。而cookie中如果設(shè)置了路徑參數(shù)，那么同一個(gè)網(wǎng)站中不同路徑下的cookie互相是訪問(wèn)不到的。
4. cookie和session詳解
http是無(wú)狀態(tài)的協(xié)議，客戶每次讀取web頁(yè)面時(shí)，服務(wù)器都打開新的會(huì)話，而且服務(wù)器也不會(huì)自動(dòng)維護(hù)客戶的上下文信息，那么要怎么才能實(shí)現(xiàn)網(wǎng)上商店中的購(gòu)物車呢，session就是一種保存上下文信息的機(jī)制，它是針對(duì)每一個(gè)用戶的，變量的值保存在服務(wù)器端，通過(guò)SessionID來(lái)區(qū)分不同的客戶,session是以cookie或URL重寫為基礎(chǔ)的，默認(rèn)使用cookie來(lái)實(shí)現(xiàn)，系統(tǒng)會(huì)創(chuàng)造一個(gè)名為JSESSIONID的輸出cookie，我們叫做session cookie,以區(qū)別persistent cookies,也就是我們通常所說(shuō)的cookie,注意session cookie是存儲(chǔ)于瀏覽器內(nèi)存中的，并不是寫到硬盤上的，這也就是我們剛才看到的JSESSIONID，我們通常情是看不到JSESSIONID的，但是當(dāng)我們把瀏覽器的cookie禁止后，web服務(wù)器會(huì)采用URL重寫的方式傳遞Sessionid，我們就可以在地址欄看到sessionid=KWJHUG6JJM65HS2K6之類的字符串。
具體來(lái)說(shuō)cookie機(jī)制采用的是在客戶端保持狀態(tài)的方案。它是在用戶端的會(huì)話狀態(tài)的存貯機(jī)制，他需要用戶打開客戶端的cookie支持。cookie的作用就是為了解決HTTP協(xié)議無(wú)狀態(tài)的缺陷所作的努力.
而session機(jī)制采用的是一種在客戶端與服務(wù)器之間保持狀態(tài)的解決方案。同時(shí)我們也看到，由于采用服務(wù)器端保持狀態(tài)的方案在客戶端也需要保存一個(gè)標(biāo)識(shí)，所以session機(jī)制可能需要借助于cookie機(jī)制來(lái)達(dá)到保存標(biāo)識(shí)的目的。而session提供了方便管理全局變量的方式
session是針對(duì)每一個(gè)用戶的，變量的值保存在服務(wù)器上，用一個(gè)sessionID來(lái)區(qū)分是哪個(gè)用戶session變量,這個(gè)值是通過(guò)用戶的瀏覽器在訪問(wèn)的時(shí)候返回給服務(wù)器，當(dāng)客戶禁用cookie時(shí)，這個(gè)值也可能設(shè)置為由get來(lái)返回給服務(wù)器。
就安全性來(lái)說(shuō)：當(dāng)你訪問(wèn)一個(gè)使用session 的站點(diǎn)，同時(shí)在自己機(jī)子上建立一個(gè)cookie，建議在服務(wù)器端的SESSION機(jī)制更安全些.因?yàn)樗粫?huì)任意讀取客戶存儲(chǔ)的信息。
正統(tǒng)的cookie分發(fā)是通過(guò)擴(kuò)展HTTP協(xié)議來(lái)實(shí)現(xiàn)的，服務(wù)器通過(guò)在HTTP的響應(yīng)頭中加上一行特殊的指示以提示瀏覽器按照指示生成相應(yīng)的cookie
從網(wǎng)絡(luò)服務(wù)器觀點(diǎn)看所有HTTP請(qǐng)求都獨(dú)立于先前請(qǐng)求。就是說(shuō)每一個(gè)HTTP響應(yīng)完全依賴于相應(yīng)請(qǐng)求中包含的信息
狀態(tài)管理機(jī)制克服了HTTP的一些限制并允許網(wǎng)絡(luò)客戶端及服務(wù)器端維護(hù)請(qǐng)求間的關(guān)系。在這種關(guān)系維持的期間叫做會(huì)話(session)。
Cookies是服務(wù)器在本地機(jī)器上存儲(chǔ)的小段文本并隨每一個(gè)請(qǐng)求發(fā)送至同一個(gè)服務(wù)器。
session機(jī)制是一種服務(wù)器端的機(jī)制，服務(wù)器使用一種類似于散列表的結(jié)構(gòu)（也可能就是使用散列表）來(lái)保存信息。
當(dāng)程序需要為某個(gè)客戶端的請(qǐng)求創(chuàng)建一個(gè)session的時(shí)候，服務(wù)器首先檢查這個(gè)客戶端的請(qǐng)求里是否已包含了一個(gè)session標(biāo)識(shí) - 稱為 session id，如果已包含一個(gè)session id則說(shuō)明以前已經(jīng)為此客戶端創(chuàng)建過(guò)session，服務(wù)器就按照session id把這個(gè) session檢索出來(lái)使用（如果檢索不到，可能會(huì)新建一個(gè)），如果客戶端請(qǐng)求不包含session id，則為此客戶端創(chuàng)建一個(gè)session并且生成一個(gè)與此session相關(guān)聯(lián)的session id，session id的值應(yīng)該是一個(gè)既不會(huì)重復(fù)，又不容易被找到規(guī)律以仿造的字符串，這個(gè) session id將被在本次響應(yīng)中返回給客戶端保存。
在談?wù)搒ession機(jī)制的時(shí)候，常常聽到這樣一種誤解“只要關(guān)閉瀏覽器，session就消失了”。其實(shí)可以想象一下會(huì)員卡的例子，除非顧客主動(dòng)對(duì)店家提出銷卡，否則店家絕對(duì)不會(huì)輕易刪除顧客的資料。對(duì)session來(lái)說(shuō)也是一樣的，除非程序通知服務(wù)器刪除一個(gè)session，否則服務(wù)器會(huì)一直保留，程序一般都是在用戶做log off的時(shí)候發(fā)個(gè)指令去刪除session。然而瀏覽器從來(lái)不會(huì)主動(dòng)在關(guān)閉之前通知服務(wù)器它將要關(guān)閉，因此服務(wù)器根本不會(huì)有機(jī)會(huì)知道瀏覽器已經(jīng)關(guān)閉，之所以會(huì)有這種錯(cuò)覺(jué)，是大部分session機(jī)制都使用會(huì)話cookie來(lái)保存session id，而關(guān)閉瀏覽器后這個(gè) session id就消失了，再次連接服務(wù)器時(shí)也就無(wú)法找到原來(lái)的session。如果服務(wù)器設(shè)置的cookie被保存到硬盤上，或者使用某種手段改寫瀏覽器發(fā)出的HTTP請(qǐng)求頭，把原來(lái)的session id發(fā)送給服務(wù)器，則再次打開瀏覽器仍然能夠找到原來(lái)的session。
恰恰是由于關(guān)閉瀏覽器不會(huì)導(dǎo)致session被刪除，迫使服務(wù)器為seesion設(shè)置了一個(gè)失效時(shí)間，當(dāng)距離客戶端上一次使用session的時(shí)間超過(guò)這個(gè)失效時(shí)間時(shí)，服務(wù)器就可以認(rèn)為客戶端已經(jīng)停止了活動(dòng)，才會(huì)把session刪除以節(jié)省存儲(chǔ)空間。
大家都知道，http是無(wú)狀態(tài)的協(xié)議，客戶每次讀取web頁(yè)面時(shí)，服務(wù)器都打開新的會(huì)話，而且服務(wù)器也不會(huì)自動(dòng)維護(hù)客戶的上下文信息，那么要怎么才能實(shí)現(xiàn)網(wǎng)上商店中的購(gòu)物車呢，session就是一種保存上下文信息的機(jī)制，它是針對(duì)每一個(gè)用戶的，變量的值保存在服務(wù)器端，通過(guò)SessionID來(lái)區(qū)分不同的客戶,session是以cookie或URL重寫為基礎(chǔ)的，默認(rèn)使用cookie來(lái)實(shí)現(xiàn)，系統(tǒng)會(huì)創(chuàng)造一個(gè)名為JSESSIONID的輸出cookie，我們叫做session cookie,以區(qū)別persistent cookies,也就是我們通常所說(shuō)的cookie,注意session cookie是存儲(chǔ)于瀏覽器內(nèi)存中的，并不是寫到硬盤上的，這也就是我們剛才看到的JSESSIONID，我們通常情是看不到JSESSIONID的，但是當(dāng)我們把瀏覽器的cookie禁止后，web服務(wù)器會(huì)采用URL重寫的方式傳遞Sessionid，我們就可以在地址欄看到sessionid=KWJHUG6JJM65HS2K6之類的字符串。
通常session cookie是不能跨窗口使用的，當(dāng)你新開了一個(gè)瀏覽器窗口進(jìn)入相同頁(yè)面時(shí)，系統(tǒng)會(huì)賦予你一個(gè)新的sessionid，這樣我們信息共享的目的就達(dá)不到了，此時(shí)我們可以先把sessionid保存在persistent cookie中，然后在新窗口中讀出來(lái)，就可以得到上一個(gè)窗口SessionID了，這樣通過(guò)session cookie和persistent cookie的結(jié)合我們就實(shí)現(xiàn)了跨窗口的session tracking（會(huì)話跟蹤）。
5. web storage和cookie的區(qū)別
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去，這樣無(wú)形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生
sessionStorage、localStorage、cookie都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)，其中sessionStorage的概念很特別，引入了一個(gè)“瀏覽器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說(shuō)只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉，即使刷新頁(yè)面或進(jìn)入同源另一頁(yè)面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage即被銷毀。同時(shí)“獨(dú)立”打開的不同窗口，即使是同一頁(yè)面，sessionStorage對(duì)象也是不同的。
Web Storage帶來(lái)的好處：
- 減少網(wǎng)絡(luò)流量：一旦數(shù)據(jù)保存在本地后，就可以避免再向服務(wù)器請(qǐng)求數(shù)據(jù)，因此減少不必要的數(shù)據(jù)請(qǐng)求，減少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來(lái)回傳遞。
- 快速顯示數(shù)據(jù)：性能好，從本地讀數(shù)據(jù)比通過(guò)網(wǎng)絡(luò)從服務(wù)器獲得數(shù)據(jù)快得多，本地?cái)?shù)據(jù)可以即時(shí)獲得。再加上網(wǎng)頁(yè)本身也可以有緩存，因此整個(gè)頁(yè)面和數(shù)據(jù)都在本地的話，可以立即顯示。
- 臨時(shí)存儲(chǔ)：很多時(shí)候數(shù)據(jù)只需要在用戶瀏覽一組頁(yè)面期間使用，關(guān)閉窗口后數(shù)據(jù)就可以丟棄了，這種情況使用sessionStorage非常方便。
6. 瀏覽器本地存儲(chǔ)與服務(wù)器端存儲(chǔ)之間的區(qū)別
其實(shí)數(shù)據(jù)既可以在瀏覽器本地存儲(chǔ)，也可以在服務(wù)器端存儲(chǔ)。
瀏覽器端可以保存一些數(shù)據(jù)，需要的時(shí)候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器存儲(chǔ)在本地的數(shù)據(jù)。
服務(wù)器端也可以保存所有用戶的所有數(shù)據(jù)，但需要的時(shí)候?yàn)g覽器要向服務(wù)器請(qǐng)求數(shù)據(jù)。
- 服務(wù)器端可以保存用戶的持久數(shù)據(jù)，如數(shù)據(jù)庫(kù)和云存儲(chǔ)將用戶的大量數(shù)據(jù)保存在服務(wù)器端。
- 服務(wù)器端也可以保存用戶的臨時(shí)會(huì)話數(shù)據(jù)。服務(wù)器端的session機(jī)制，如jsp的 session 對(duì)象，數(shù)據(jù)保存在服務(wù)器上。實(shí)現(xiàn)上，服務(wù)器和瀏覽器之間僅需傳遞session id即可，服務(wù)器根據(jù)session id找到對(duì)應(yīng)用戶的session對(duì)象。會(huì)話數(shù)據(jù)僅在一段時(shí)間內(nèi)有效，這個(gè)時(shí)間就是server端設(shè)置的session有效期。
服務(wù)器端保存所有的用戶的數(shù)據(jù)，所以服務(wù)器端的開銷較大，而瀏覽器端保存則把不同用戶需要的數(shù)據(jù)分布保存在用戶各自的瀏覽器中。
瀏覽器端一般只用來(lái)存儲(chǔ)小數(shù)據(jù)，而服務(wù)器可以存儲(chǔ)大數(shù)據(jù)或小數(shù)據(jù)。
服務(wù)器存儲(chǔ)數(shù)據(jù)安全一些，瀏覽器只適合存儲(chǔ)一般數(shù)據(jù)。
7. sessionStorage 、localStorage 和 cookie 之間的區(qū)別
共同點(diǎn)：都是保存在瀏覽器端，且同源的。
區(qū)別：
- cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下。
- 存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4k，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)。sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
- 數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。
- 作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
- Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。
- Web Storage 的 api 接口使用更方便。
8. sessionStorage與頁(yè)面 js 數(shù)據(jù)對(duì)象的區(qū)別
頁(yè)面中一般的 js 對(duì)象或數(shù)據(jù)的生存期是僅在當(dāng)前頁(yè)面有效，因此刷新頁(yè)面或轉(zhuǎn)到另一頁(yè)面這樣的重新加載頁(yè)面的情況，數(shù)據(jù)就不存在了。
而sessionStorage 只要同源的同窗口（或tab）中，刷新頁(yè)面或進(jìn)入同源的不同頁(yè)面，數(shù)據(jù)始終存在。也就是說(shuō)只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉，加載新頁(yè)面或重新加載，數(shù)據(jù)仍然存在。
9. localStorage和sessionStorage操作
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
9.1 localStorage和sessionStorage的方法:
-
setItem存儲(chǔ)value
用途：將value存儲(chǔ)到key字段
用法：.setItem( key, value)
代碼示例:
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");
-
getItem獲取value
用途：獲取指定key本地存儲(chǔ)的值
用法：.getItem(key)
代碼示例：
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");
-
removeItem刪除key
用途：刪除指定key本地存儲(chǔ)的值
用法：.removeItem(key)
代碼示例：
sessionStorage.removeItem("key");
localStorage.removeItem("site");
-
clear清除所有的key/value
用途：清除所有的key/value
用法：.clear()
代碼示例：
sessionStorage.clear();
localStorage.clear();
-
其他操作方法：點(diǎn)操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通對(duì)象一樣用點(diǎn)(.)操作符，及[]的方式進(jìn)行數(shù)據(jù)存儲(chǔ)，像如下的代碼：
var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
-
localStorage和sessionStorage的key和length屬性實(shí)現(xiàn)遍歷
sessionStorage和localStorage提供的key()和length可以方便的實(shí)現(xiàn)存儲(chǔ)的數(shù)據(jù)遍歷，例如下面的代碼：
var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
9.2 storage事件
storage還提供了storage事件，當(dāng)鍵值改變或者clear的時(shí)候，就可以觸發(fā)storage事件，如下面的代碼就添加了一個(gè)storage事件改變的監(jiān)聽：
if(window.addEventListener){
window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
window.attachEvent("onstorage",handle_storage); }
function handle_storage(e){
if(!e){
e=window.event;
}
}
storage事件對(duì)象的具體屬性如下表：
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<th width="30">Property</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>key</td>
<td>String</td>
<td>The named key that was added, removed, or moddified</td>
</tr>
<tr>
<td>oldValue</td>
<td>Any</td>
<td>The previous value(now overwritten), or null if a new item was added</td>
</tr>
<tr>
<td>newValue</td>
<td>Any</td>
<td>The new value, or null if an item was added</td>
</tr>
<tr>
<td>url/uri</td>
<td>String</td>
<td>The page that called the method that triggered this change</td>
</tr>
</table>
