1、存儲的時間有效期不同
2、存儲的大小不同
cookie的存儲是4kb左右,存儲量較小,一般頁面非常多存儲20條左右信息。localStorage和sessionStorage的存儲容量是5Mb(官方介紹,可能和瀏覽器有部分差異性)。3、與服務(wù)端的通信不同
cookie會參與到與服務(wù)端的通信中,一般會攜帶在http請求的頭部中,例如一些關(guān)鍵密匙驗證等。localStorage和sessionStorage是單純的前端存儲,不參與與服務(wù)端的通信。4、讀寫操作的便捷程度不同
cookie的相關(guān)操作:
cookie操作起來較為繁瑣,并且部分?jǐn)?shù)據(jù)不可以讀取操作。
cookie的創(chuàng)建(修改和創(chuàng)建相同,創(chuàng)建同樣名稱會覆蓋之前的):
//JavaScript 中,創(chuàng)建 cookie 如下所示:document.cookie="username=John Doe";//您還可以為 cookie 添加一個過期時間(以 UTC 或 GMT 時間)。默認(rèn)情況下,cookie 在瀏覽器關(guān)閉時刪除:document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";//您可以使用 path 參數(shù)告訴瀏覽器 cookie 的路徑。默認(rèn)情況下,cookie 屬于當(dāng)前頁面。document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
cookie的讀取:
var x = document.cookie;
cookie的刪除:
//刪除 cookie 非常簡單。您只需要設(shè)置 expires 參數(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)操作:
存儲一條數(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)操作:
存儲一條數(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、對于瀏覽器的支持不同
cookie出現(xiàn)的時間較早,目前見到的瀏覽器都支持。localStorage和sessionStorage出現(xiàn)的時間較晚,對于版本較低的瀏覽器不支持(比如IE8版本以下的都不支持)。6、作用域不同
cookie:cookie在瀏覽器和服務(wù)器之間來回傳遞,如果使用cookie保存過多數(shù)據(jù)會造成性能問題。sessionStorage:僅在客戶端(瀏覽器)中保存,不參與服務(wù)器的通信。localStorage:僅在客戶端(瀏覽器)中保存,不參與服務(wù)器的通信。7、應(yīng)用場景不同
cookie:判斷用戶是否登錄過網(wǎng)站,以便實現(xiàn)下次自動登錄或記住密碼;保存事件信息。sessionStorage:敏感賬號一次性登錄,單頁面用的較多。localStorage:用于長期登錄,適于長期保存在本地的數(shù)據(jù)。延伸閱讀1:Cookie的主要構(gòu)成
namevaluedomainpathexpiresmax-ageHttpOnlysecure