HTML4本地儲存:

一.cookies:

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

區別：

1、保持狀態：cookie儲存在瀏覽器端，session儲存在伺服器端

2、使用方式：

（1）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) 進行實現；API對encodeURL的結束為，當瀏覽器支援Cookie時，url不做任何處理；當瀏覽器不支援Cookie的時候，將會重寫URL將SessionID拼接到訪問地址後。

3、儲存內容：cookie只能儲存字串型別，以文字的方式；session通過類似與Hashtable的資料結構來儲存，能支援任何型別的物件(session中可含有多個物件)

4、儲存的大小：cookie：單個cookie儲存的資料不能超過4kb；session大小沒有限制。

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

原因如下：（1）sessionID儲存在cookie中，若要攻破session首先要攻破cookie；

　　　　　（2）sessionID是要有人登入，或者啟動session_start才會有，所以攻破cookie也不一定能得到sessionID；

　　　　　（3）第二次啟動session_start後，前一次的sessionID就是失效了，session過期後，sessionID也隨之失效。

　　　　　（4）sessionID是加密的

　　　　　（5）綜上所述，攻擊者必須在短時間內攻破加密的sessionID，這很難。

6、應用場景：

cookie：（1）判斷使用者是否登陸過網站，以便下次登入時能夠實現自動登入（或者記住密碼）。如果我們刪除cookie，則每次登入必須從新填寫登入的相關資訊。

　　　　（2）儲存上次登入的時間等資訊。

　　　　（3）儲存上次檢視的頁面

　　　　（4）瀏覽計數

二.session

用處

Session用於儲存每個使用者的專用資訊，變數的值儲存在伺服器端，通過SessionID來區分不同的客戶。

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

　　（2）儲存使用者登入資訊

　　（3）將某些資料放入session中，供同一使用者的不同頁面使用

　　（4）防止使用者非法登入

7、缺點：

cookie：

（1）大小受限

（2）使用者可以操作（禁用）cookie，使功能受限

（3）安全性較低

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

（5）每次訪問都要傳送cookie給伺服器，浪費頻寬。

（6）cookie資料有路徑（path）的概念，可以限制cookie只屬於某個路徑下。

session：

（1）Session儲存的東西越多，就越佔用伺服器記憶體，對於使用者線上人數較多的網站，伺服器的記憶體壓力會比較大。

（2）依賴於cookie（sessionID儲存在cookie），如果禁用cookie，則要使用URL重寫，不安全

（3）建立Session變數有很大的隨意性，可隨時呼叫，不需要開發者做精確地處理，所以，過度使用session變數將會導致程式碼不可讀而且不好維護。

HTML5本地儲存

解釋1

HTML5中與本地儲存相關的兩個重要內容：Web Storage與本地資料庫。其中，Web Storage儲存機制是對HTML4中cookie儲存機制的一個改善。由於cookie儲存機制有很多缺點，HTML5不再使用它，轉而使用改良後的Web Storage儲存機制。本地資料庫是HTML5中新增的一個功能，使用它可以在客戶端本地建立一個數據庫，原本必須儲存在伺服器端資料庫中的內容現在可以直接儲存在客戶端本地了，這大大減輕了伺服器端的負擔，同時也加快了訪問資料的速度。

本文主要來講解Web Storage

我們知道，在HTML4中可以使用cookie在客戶端儲存諸如使用者名稱等簡單的使用者資訊，但是，通過長期的使用，你會發現，用cookie儲存永久資料存在以下幾個問題：

1.大小：cookie的大小被限制在4KB。

2.頻寬：cookie是隨HTTP事務一起被髮送的，因此會浪費一部分發送cookie時使用的頻寬。

3.複雜性：要正確的操縱cookie是很困難的。

針對這些問題，在HTML5中，重新提供了一種在客戶端本地儲存資料的功能，它就是Web Storage。

具體來說，Web Storage又分為兩種：

1.sessionStorage：將資料儲存在session物件中。所謂session，是指使用者在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是使用者瀏覽這個網站所花費的時間。session物件可以用來儲存在這段時間內所要求儲存的任何資料。

2.localStorage：將資料儲存在客戶端本地的硬體裝置(通常指硬碟，也可以是其他硬體裝置)中，即使瀏覽器被關閉了，該資料仍然存在，下次開啟瀏覽器訪問網站時仍然可以繼續使用。

這兩者的區別在於，sessionStorage為臨時儲存，而localStorage為永久儲存。

到目前為止，Firefox3.6以上、Chrome6以上、Safari 5以上、Pera10.50以上、IE8以上版本的瀏覽器支援sessionStorage與localStorage的使用。

解釋2

WebStorage的目的是克服由cookie所帶來的一些限制，當資料需要被嚴格控制在客戶端時，不需要持續的將資料發回伺服器。

WebStorage兩個主要目標：（1）提供一種在cookie之外儲存會話資料的路徑。（2）提供一種儲存大量可以跨會話存在的資料的機制。

HTML5的WebStorage提供了兩種API：localStorage（本地儲存）和sessionStorage（會話儲存）。

1、生命週期：localStorage:localStorage的生命週期是永久的，關閉頁面或瀏覽器之後localStorage中的資料也不會消失。localStorage除非主動刪除資料，否則資料永遠不會消失。

　　　　　　sessionStorage的生命週期是在僅在當前會話下有效。sessionStorage引入了一個“瀏覽器視窗”的概念，sessionStorage是在同源的視窗中始終存在的資料。只要這個瀏覽器視窗沒有關閉，即使重新整理頁面或者進入同源另一個頁面，資料依然存在。但是sessionStorage在關閉了瀏覽器視窗後就會被銷燬。同時獨立的開啟同一個視窗同一個頁面，sessionStorage也是不一樣的。

2、儲存大小：localStorage和sessionStorage的儲存資料大小一般都是：5MB

3、儲存位置：localStorage和sessionStorage都儲存在客戶端，不與伺服器進行互動通訊。

4、儲存內容型別：localStorage和sessionStorage只能儲存字串型別，對於複雜的物件可以使用ECMAScript提供的JSON物件的stringify和parse來處理

5、獲取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

6、應用場景：localStoragese：常用於長期登入（+判斷使用者是否已登入），適合長期儲存在本地的資料。sessionStorage：敏感賬號一次性登入；

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

cookie 、sessionStorage與localStorage的區別

使用示例(僅js)

sessionStorage

//存資料
sessionStorage.setItem("message",message);
sessionStorage.message = message 
取資料
message = sessionStorage.message 
message = sessionStorage.getItem("message ")

localStorage

//存資料
localStorage.setItem("message",message);
localStorage.message = message 
取資料
message = localStorage.message 
message = localStorage.getItem("message ")

【轉】