一、概念介紹

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

WebStorage兩個主要目標：

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

二、cookie 的特點

1. 只能使用文本文件
2. 文件有大小限制4K左右
3. 不可跨域
4. 時效限制（默認會話級，可指定)
5. 每次都會隨著請求，發(fā)往服務(wù)器
6. 完全兼容

三、localStorage 的特點

1. 只能使用文本文件
2. 文件有大小5M左右
3. 不可跨域
4. localStorage沒有過期時間；sessionStorage只能會話級
5. 不會發(fā)往服務(wù)器
6. 低版本瀏覽器不兼容

不安全、不能跨域、不能跨瀏覽器,寫入的都是字符

四、相同點

cookie，localStorage，sessionStorage都是在客戶端保存數(shù)據(jù)的，存儲數(shù)據(jù)的類型都是字符串，都不安全、不能跨域、不能跨瀏覽器。

五、不同點：

1. 有效期：

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

2. 網(wǎng)絡(luò)流量

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

3. 大小限制

cookie大小限制在4KB，非常?。籰ocalstorage和sessionStorage在5M

4. 安全性

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

5. 便攜性

cookie只提供了一個屬性可供操作；而storage提供了一系列的API，操作方便快捷

六、語法

1. cookie

// 設(shè)置
let d = new Date();
d.setDate(d.getDate()+3);
document.cookie = `${key}=${value};expires=$u0z1t8os;path=/;domain=localhost`;

// 獲取，只能獲取所有，需要配合字符串處理，才能拿到指定cookie
console.log(document.cookie)

// 刪除，將有效期expires設(shè)置為過去的日期對象
let d = new Date();
d.setDate(d.getDate()-1);
document.cookie = `${key}=${value};expires=$u0z1t8os;path=/;domain=localhost`;

2. storage

localstorage和sessionStorage的操作API一致，此處以localstorage舉例

localstorage.setItem(key, value);  // 保存數(shù)據(jù)，以鍵值對的方式儲存信息。
localstorage.getItem(key);         // 獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對應(yīng)的value值。
localstorage.removeItem(key);      // 刪除單個數(shù)據(jù)，根據(jù)鍵值移除對應(yīng)的信息。
localstorage.clear();              // 刪除所有的數(shù)據(jù)，不推薦使用
localstorage.key;                  // 獲取指定key的value

以上，如有紕漏或不同觀點，歡迎留言討論...