cookie 是在 HTML4 中使用的給客戶端保存數(shù)據(jù)的，也可以和 session 配合實(shí)現(xiàn)跟蹤瀏覽器用戶身份；
而 webstorage（包括：localStorage和sessionStorage）是在HTML5提出來的，純粹為了保存數(shù)據(jù)，不會(huì)與服務(wù)器端通信。

WebStorage兩個(gè)主要目標(biāo)：

1. 提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的路徑。
2. 提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制。

相同點(diǎn)

cookie，localStorage，sessionStorage都是在客戶端 保存數(shù)據(jù) 的，存儲(chǔ)數(shù)據(jù)的類型：都是字符串。

不通點(diǎn)

1. 生命周期：
   1.1 cookie如果不設(shè)置有效期，那么就是臨時(shí)存儲(chǔ)（存儲(chǔ)在內(nèi)存中），是會(huì)話級別的，會(huì)話結(jié)束后，cookie也就失效了，如果設(shè)置了有效期，那么cookie存儲(chǔ)在硬盤里，有效期到了，就自動(dòng)消失了。
   1.2 localStorage的生命周期是永久的，關(guān)閉頁面或?yàn)g覽器之后 localStorage中的數(shù)據(jù)也不會(huì)消失。localStorage除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失。
   1.3 sessionStorage僅在當(dāng)前會(huì)話下有效。sessionStorage引入了一個(gè)瀏覽器窗口的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)。只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁面或者進(jìn)入同源另一個(gè)頁面，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷毀。同時(shí)獨(dú)立的打開同一個(gè)窗口同一個(gè)頁面，sessionStorage也是不一樣的。
   可以簡單的理解為：sessionStorage，沒有設(shè)置有效期的cookie。
   如果說把cookie的有效期設(shè)置為永遠(yuǎn)永遠(yuǎn)，永久，那么就是localStorage。
   cookie沒有設(shè)置有效期，那么就是sessionStorage。

2. 網(wǎng)絡(luò)流量：cookie的數(shù)據(jù)每次都會(huì)發(fā)給服務(wù)器端，而localstorage和sessionStorage不會(huì)與服務(wù)器端通信，純粹為了保存數(shù)據(jù)，所以，webstorage更加節(jié)約網(wǎng)絡(luò)流量。

3. 大小限制：cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M。

4. 安全性：WebStorage不會(huì)隨著HTTP header發(fā)送到服務(wù)器端，所以安全性相對于cookie來說比較高一些，不會(huì)擔(dān)心截獲。

5. 使用方便性上：WebStorage提供了一些方法，數(shù)據(jù)操作比cookie方便；

• setItem (key, value)—— 保存數(shù)據(jù)，以鍵值對的方式儲(chǔ)存信息。
• getItem (key) —— 獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對應(yīng)的value值。
• removeItem (key) —— 刪除單個(gè)數(shù)據(jù)，根據(jù)鍵值移除對應(yīng)的信息。
• clear () —— 刪除所有的數(shù)據(jù)
• key (index) —— 獲取某個(gè)索引的key