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