一，共同點
localStorage、sessionStorage、Cookie都是儲存在瀏覽器端，且同源的（URL的協議、埠、主機名是相同的，只要有一個不同就屬於不同源）。
二，區別
cookie：
原本是用來客戶端與伺服器端通訊的，因其有儲存的功能，所以被用來儲存。生命期為只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。 存放資料大小為4K左右 ，所以cookie只適合儲存很小的資料，如會話標識。有個數限制（各瀏覽器不同），一般不能超過20個。與伺服器端通訊：每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題。但Cookie需要程式設計師自己封裝，源生的Cookie介面不友好。
優點：
1.通過良好的程式設計，控制儲存在cookie中的session物件的大小。
2.通過加密和安全傳輸技術，減少cookie被破解的可能性。
3.只有在cookie中存放不敏感的資料，即使被盜取也不會有很大的損失。
4.控制cookie的生命期，使之不會永遠有效。這樣的話偷盜者很可能拿到的就 是一個過期的cookie。
缺點：
1.cookie的長度和數量的限制。每個domain最多隻能有20條cookie，每個cookie長度不能超過4KB。否則會被截掉。
2.安全性問題。如果cookie被人攔掉了，那個人就可以獲取到所有session資訊。加密的話也不起什麼作用。
3.有些狀態不可能儲存在客戶端。例如，為了防止重複提交表單，我們需要在服務端儲存一個計數器。若吧計數器儲存在客戶端，則起不到什麼作用。
WebStorage:
使用HTML5可以在本地儲存使用者的瀏覽資料。早些時候,本地儲存使用的是 cookie。但是Web 儲存需要更加的安全與快速，這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求網站資料上。它也可以儲存大量的資料，而不影響網站的效能。資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。
Web Storage的目的是為了克服由cookie帶來的一些限制，當資料需要被嚴格控制在客戶端上時，無須持續地將資料發回伺服器。Web Storage的兩個主要目標是：一是為了提供一種在cookie之外儲存會話資料的途徑。第二是提供一種儲存大量可以跨會話存在的資料的機制。

 Web Storage又分為兩種： sessionStorage 和localStorage ，即這兩個是Storage的一個例項。從字面意思就可以很清楚的看出來，sessionStorage將資料儲存在session中，瀏覽器關閉也就沒了；而localStorage則一直將資料儲存在客戶端本地； 不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）： 

儲存資料：localStorage.setItem(key,value);
讀取資料：localStorage.getItem(key);
刪除單個數據：localStorage.removeItem(key);
刪除所有資料：localStorage.clear();
得到某個索引的key：localStorage.key(index);
sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。
作用域也不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。Web Storage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。Web Storage 的 api 介面使用更方便。
WebStorage的優點：
1.儲存空間更大：cookie為4KB，而WebStorage是5MB；
2.節省網路流量：WebStorage不會傳送到伺服器，儲存在本地的資料可以直接獲取，也不會像cookie一樣美詞請求都會傳送到伺服器，所以減少了客戶端和伺服器端的互動，節省了網路流量；
3.對於那種只需要在使用者瀏覽一組頁面期間儲存而關閉瀏覽器後就可以丟棄的資料，sessionStorage會非常方便；
4.快速顯示：有的資料儲存在WebStorage上，再加上瀏覽器本身的快取。獲取資料時可以從本地獲取會比從伺服器端獲取快得多，所以速度更快；
5.安全性：WebStorage不會隨著HTTP header傳送到伺服器端，所以安全性相對於cookie來說比較高一些，不會擔心截獲，但是仍然存在偽造問題；
6.WebStorage提供了一些方法，資料操作比cookie方便；
最後附上一張對比圖