localStorage、sessionStorage、cookies的區別

瀏覽器的緩存機制提供了能夠將用戶數據存儲在客戶端的方式，能夠利用cookie,session等跟服務器進行交互。

HTML4地本地存儲cookie

1、cookie與session

cookie和session都是用來跟蹤瀏覽器用戶身份的會話方式。

區別：

一、保持狀態：cookie保存在瀏覽器端，session保存在服務器端

二、使用方式：

（1）cookie機制：若是不在瀏覽器中設置過時時間，cookie被保存在內存中，生命週期隨瀏覽器的關閉而結束。這種cookie簡稱會話cookie。

　　若是在瀏覽器中設置了cookie的過時時間，cookie被保存在硬盤中，關閉瀏覽器後，cookie數據仍然存在，直到過時時間結束才消失。

　　cookie是服務器發給客戶端的特殊信息（cookie由服務端生成），cookie是以文本的方式保存在客戶端，每次向服務器發送請求都帶上cookie。

（2）session機制：當服務器收到請求須要建立session對象時，首先會檢查客戶端請求中是否包含sessionid。若是有sessionid，服務器根據id返回對應的session對象。當客戶端請求中沒有sessionid，服務器會建立新的session對象，並把sessionid在本次響應中返回給客戶端。一般使用cookie方式存儲sessionid到客戶端，在交互中瀏覽器按照規則將sessionid發送給服務器。

若是用戶禁用cookie，須要使用URL重寫，能夠經過response.encodeURL(url)進行實現；當瀏覽器支持cookie時，url不作任何處理；當瀏覽器不支持cookie時，將會重寫URL將sessionid拼接到訪問地址後。

（3）存儲內容：

　　cookie只能保存字符串類型，以文本的方式；session經過相似於Hashtable的數據結構來保存，能支持任何類型的對象（session中可能含有多個對象）

（4）存儲大小：

　　單個cookie保存的數據大小不能超過4kb；session大小沒有限制。

（5）安全性：

　　針對cookie所存在的攻擊：cookie欺騙，cookie截獲；session的安全性大於cookie。

       緣由：

• sessionid存儲在cookie中，若要攻破sessionid首先要攻破cookie。
• sessionid是要有人登陸或者啓動session_start纔會有，因此攻破cookie也不必定獲得sessionid。（session_start是把用戶提交的數據以全局變量的形式保存在session中，並生成惟一的sessionid）。
• 第二次啓動session_start後，前一次的sessionid就是失效了，session過時後，sessionid也隨之消失。
• sessionid是加密的。

 （6）應用場景

cookie：（1）實現自動登陸，記住密碼。

　　　　　　下次自動登錄的實現過程：

　　　　　　設置一個自動登錄狀態的標識符，用戶登陸時將用戶名、密碼和該標識符發送到服務器端；若是勾選了「自動登陸」功能，服務器端會將sessionId、用戶名以及加密後的密碼發送給客戶端而且保存在cookie中；若是沒有勾選「自動登陸」功能，服務器端只返回一個sessionId。

　　　　（2）保存上次登陸的時間等信息。

　　　　（3）保存上次查看的頁面

　　　　（4）瀏覽計數，跟蹤用戶訪問該網站的習慣。好比什麼時間訪問，訪問了哪些頁面，在每一個頁面的停留時間等。利用這些信息，一方面能夠爲用戶提供個性化的服務，另外一方面，也能夠做爲了解全部用戶行爲的工具。

　　　　（5）購物車之類的處理，用戶可能會在一段時間內在同一家網站的不一樣頁面中選擇不一樣的商品，這些信息都會寫入cookie中，以便在最後付款的時候提取信息。

session：用於保存每一個用戶的專用信息，變量的值保存在服務器端，經過sessionid來區分不一樣的用戶。

　　　　（1）網上商城中的購物車

　　　　（2）保存用戶登錄信息

　　　　（3）將某些數據存放入session中，供同一用戶的不一樣頁面使用

　　　　（4）防止用戶非法登錄

（7）缺點

cookie：（1）大小受限，每一個特定的域名下最多生成的cookie個數有限制，當超過限制時，IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie

　　　　（2）用戶能夠操做cookie，使功能受限

　　　　（3）安全性較低，若是cookie被截獲，那人就能夠取得全部的session信息。

　　　　（4）有些狀態不可能保存在客戶端

　　　　（5）每次訪問都要傳送cookie給服務器，浪費帶寬。cookie是隨HTTP事務一塊兒被髮送的，所以會浪費一部分發送cookie時使用的帶寬。

　　　　（6）cookie數據有路徑的概念，能夠限制cookie只屬於某個路徑下

session:（1）session保存的東西越多，就越佔用服務器內存，對於用戶在線較多的網站，服務器的內存壓力會很大。

　　　  （2）依賴cookie（sessionid保存在cookie），若是禁用cookie，則要使用url重寫，不安全

　　　  （3）建立session變量有很大的隨意性，可隨時調用，不須要開發者作精確地處理，因此，過分使用session變量將會致使代碼不可讀且很差維護。

　　服務器端根據Cookie中的信息判斷用戶是否登錄，那若是瀏覽器中禁用Cookie，怎麼保障整個機制的正常運轉？

　　（1）在每次請求中都攜帶SessionID的參數；

　　（2）Token機制。Token機制多用於App客戶端和服務器交互的模式，也可用在web端作狀態管理。當用戶第一次登錄時，服務器根據用戶提交的信息生成一個Token，響應時將Token發送到客戶端，之後客戶端只需攜帶上這個Token前來請求數據便可，無需再次登錄驗證。

 

 

 

HTML5的web Storage提供了兩種API：localStorage(本地存儲)和sessionStorage(會話存儲)

　　web Storage是對cookie的一個改善，因爲cookie存儲機制有不少缺點，HTML5再也不使用它，轉而使用改良後的web Storage存儲機制。本地數據庫是HTML5中新增的一個功能，使用它能夠在客戶端本地創建一個數據庫，本來必須保存在服務端數據庫中的內容如今能夠直接保存在客戶端本地了，大大減輕了服務端的負擔，同時也加快了訪問數據的速度。

（1）生命週期：

localStorage的生命週期是永久的，關閉頁面或瀏覽器以後localStorage中的數據也不會消失。localStorage除非主動刪除數據，不然數據永遠不會消失。

sessionStorage的生命週期僅在當前會話有效。在關閉瀏覽器窗口就會銷燬。

（2）存儲大小

　　localStorage和sessionStorage的存儲數據大小通常都是5MB

（3）存儲位置

　　都保存在客戶端，不與服務器進行交互通訊。

（4）存儲內容類型

　　只能存儲字符串類型，對於複雜的對象可使用stringify和parse來處理

（5）獲取方式

　　localStorage:window.localStorage;sessionStorage:window.sessionStorage;

（6）應用場景

　　cookie存儲的數據量比較小，因此通常不會存大量數據，存儲的通常是與服務器交互的數據，好比登陸信息、設置信息（要求後端動態渲染的設置）。

 

　　localStoragese：經常使用於長期登陸（+判斷用戶是否已登陸），適合長期保存在本地的數據。sessionStorage：敏感帳號一次性登陸；

 　  localStorage能夠用於存儲該瀏覽器對該頁面的訪問次數，固然，若是換個瀏覽器，這個次數就須要從新計數了。還能夠用來存儲一些固定不變的頁面信息，這樣就不用每次都從新加載了。用於前端作統計，後端只須要一個統計結果之類的。

if (localStorage.pagecount){
     localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else{
     localStorage.pagecount=1;
}
console.log("visits:"+localStorage.pagecount);

 

 

WebStorage的優勢：

（1）存儲空間更大：cookie爲4KB，而WebStorage是5MB；

（2）節省網絡流量：WebStorage不會傳送到服務器，存儲在本地的數據能夠直接獲取，也不會像cookie同樣每次請求都會傳送到服務器，因此減小了客戶端和服務器端的交互，節省了網絡流量；

（3）對於那種只須要在用戶瀏覽一組頁面期間保存而關閉瀏覽器後就能夠丟棄的數據，sessionStorage會很是方便；

（4）快速顯示：有的數據存儲在WebStorage上，再加上瀏覽器自己的緩存。獲取數據時能夠從本地獲取會比從服務器端獲取快得多，因此速度更快；

（5）安全性：WebStorage不會隨着HTTP header發送到服務器端，因此安全性相對於cookie來講比較高一些，不會擔憂截獲，可是仍然存在僞造問題；

（6）WebStorage提供了一些方法，數據操做比cookie方便；

　　　　setItem (key, value) ——  保存數據，以鍵值對的方式儲存信息。

      　　 getItem (key) ——  獲取數據，將鍵值傳入，便可獲取到對應的value值。

        　　removeItem (key) ——  刪除單個數據，根據鍵值移除對應的信息。

        　　clear () ——  刪除全部的數據

        　　key (index) —— 獲取某個索引的key

 

注意：

不一樣tab頁中localStorage是互相影響的。在一個tab1中設置localStorage.name=1，在另外一個tab2中設置localStorage.name=2，此時再返回tab1中獲取name值爲2

在不一樣tab頁中sessionStorage是互不影響的，在一個tab1中設置localStorage.name=1，在tab2中獲取name的值爲undefined。