1、存儲的時間有效期不同

cookie的有效期是可以設置的，默認的情況下是關閉瀏覽器后失效。sessionStorage的有效期是僅保持在當前頁面，關閉當前會話頁或者瀏覽器后就會失效。localStorage的有效期是在不進行手動刪除的情況下是一直有效的。

2、存儲的大小不同

cookie的存儲是4kb左右，存儲量較小，一般頁面非常多存儲20條左右信息。localStorage和sessionStorage的存儲容量是5Mb（官方介紹，可能和瀏覽器有部分差異性）。

3、與服務端的通信不同

cookie會參與到與服務端的通信中，一般會攜帶在http請求的頭部中，例如一些關鍵密匙驗證等。localStorage和sessionStorage是單純的前端存儲，不參與與服務端的通信。

4、讀寫操作的便捷程度不同

cookie的相關操作：

cookie操作起來較為繁瑣，并且部分數據不可以讀取操作。

cookie的創建（修改和創建相同，創建同樣名稱會覆蓋之前的）：

//JavaScript 中，創建 cookie 如下所示：document.cookie="username=John Doe";//您還可以為 cookie 添加一個過期時間（以 UTC 或 GMT 時間）。默認情況下，cookie 在瀏覽器關閉時刪除：document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";//您可以使用 path 參數告訴瀏覽器 cookie 的路徑。默認情況下，cookie 屬于當前頁面。document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

cookie的讀取：

var x = document.cookie;

cookie的刪除：

//刪除 cookie 非常簡單。您只需要設置 expires 參數為以前的時間即可，如下所示，設置為 Thu, 01 Jan 1970 00:00:00 GMT:document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

sessionStorage的相關操作：

存儲一條數據：

sessionStorage.setItem('數據名', '數據值');

讀取一條數據：

let data = sessionStorage.getItem('數據名');

清除一條數據：

sessionStorage.removeItem('數據名');

移除所有數據：

sessionStorage.clear();

localStorage的相關操作：

存儲一條數據：

localStorage.setItem('數據名', '數據值');

讀取一條數據：

let data = localStorage.getItem('數據名');

清除一條數據：

localStorage.removeItem('數據名');

移除所有數據：

localStorage.clear();

5、對于瀏覽器的支持不同

cookie出現的時間較早，目前見到的瀏覽器都支持。localStorage和sessionStorage出現的時間較晚，對于版本較低的瀏覽器不支持(比如IE8版本以下的都不支持)。

6、作用域不同

cookie：cookie在瀏覽器和服務器之間來回傳遞，如果使用cookie保存過多數據會造成性能問題。sessionStorage：僅在客戶端（瀏覽器）中保存，不參與服務器的通信。localStorage：僅在客戶端（瀏覽器）中保存，不參與服務器的通信。

7、應用場景不同

cookie：判斷用戶是否登錄過網站，以便實現下次自動登錄或記住密碼；保存事件信息。sessionStorage：敏感賬號一次性登錄，單頁面用的較多。localStorage：用于長期登錄，適于長期保存在本地的數據。

延伸閱讀1：Cookie的主要構成

namevaluedomainpathexpiresmax-ageHttpOnlysecure