1、存儲(chǔ)的時(shí)間有效期不同

cookie的有效期是可以設(shè)置的，默認(rèn)的情況下是關(guān)閉瀏覽器后失效。sessionStorage的有效期是僅保持在當(dāng)前頁(yè)面，關(guān)閉當(dāng)前會(huì)話頁(yè)或者瀏覽器后就會(huì)失效。localStorage的有效期是在不進(jìn)行手動(dòng)刪除的情況下是一直有效的。

2、存儲(chǔ)的大小不同

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

3、與服務(wù)端的通信不同

cookie會(huì)參與到與服務(wù)端的通信中，一般會(huì)攜帶在http請(qǐng)求的頭部中，例如一些關(guān)鍵密匙驗(yàn)證等。localStorage和sessionStorage是單純的前端存儲(chǔ)，不參與與服務(wù)端的通信。

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

cookie的相關(guān)操作：

cookie操作起來(lái)較為繁瑣，并且部分?jǐn)?shù)據(jù)不可以讀取操作。

cookie的創(chuàng)建（修改和創(chuàng)建相同，創(chuàng)建同樣名稱會(huì)覆蓋之前的）：

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

cookie的讀取：

var x = document.cookie;

cookie的刪除：

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

sessionStorage的相關(guān)操作：

存儲(chǔ)一條數(shù)據(jù)：

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

讀取一條數(shù)據(jù)：

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

清除一條數(shù)據(jù)：

sessionStorage.removeItem('數(shù)據(jù)名');

移除所有數(shù)據(jù)：

sessionStorage.clear();

localStorage的相關(guān)操作：

存儲(chǔ)一條數(shù)據(jù)：

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

讀取一條數(shù)據(jù)：

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

清除一條數(shù)據(jù)：

localStorage.removeItem('數(shù)據(jù)名');

移除所有數(shù)據(jù)：

localStorage.clear();

5、對(duì)于瀏覽器的支持不同

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

6、作用域不同

cookie：cookie在瀏覽器和服務(wù)器之間來(lái)回傳遞，如果使用cookie保存過(guò)多數(shù)據(jù)會(huì)造成性能問(wèn)題。sessionStorage：僅在客戶端（瀏覽器）中保存，不參與服務(wù)器的通信。localStorage：僅在客戶端（瀏覽器）中保存，不參與服務(wù)器的通信。

7、應(yīng)用場(chǎng)景不同

cookie：判斷用戶是否登錄過(guò)網(wǎng)站，以便實(shí)現(xiàn)下次自動(dòng)登錄或記住密碼；保存事件信息。sessionStorage：敏感賬號(hào)一次性登錄，單頁(yè)面用的較多。localStorage：用于長(zhǎng)期登錄，適于長(zhǎng)期保存在本地的數(shù)據(jù)。

延伸閱讀1：Cookie的主要構(gòu)成

namevaluedomainpathexpiresmax-ageHttpOnlysecure