資訊專欄INFORMATION COLUMN
摘要：顧名思義，確實非常小，它的大小限制為左右，是網(wǎng)景公司的前雇員在年月的發(fā)明。是標(biāo)準(zhǔn)中新加入的技術(shù)，它并不是什么劃時代的新東西。特性與的接口類似，但保存數(shù)據(jù)的生命周期與不同。但當(dāng)頁面關(guān)閉后，中的數(shù)據(jù)就會被清空。
本文最初發(fā)布于我的個人博客：咀嚼之味
最近在找暑期實習(xí)，其中百度、網(wǎng)易游戲、阿里的面試都問到一些關(guān)于HTML5的東西，問題大多是這樣開頭的：“你用過什么HTML5的技術(shù)呀？” 而后，每次都能扯到 Cookie 和 localStorage 有啥差別。這篇文章就旨在詳細(xì)地闡述這部分內(nèi)容，而具體 Web Storage API 的使用可以參考MDN的文檔，就不在這篇文章中贅述了。
基本概念 CookieCookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右，是網(wǎng)景公司的前雇員 Lou Montulli 在1993年3月的發(fā)明。它的主要用途有保存登錄信息，比如你登錄某個網(wǎng)站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數(shù)據(jù)來實現(xiàn)的。
localStoragelocalStorage 是 HTML5 標(biāo)準(zhǔn)中新加入的技術(shù)，它并不是什么劃時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用于本地存儲，而當(dāng)時考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多數(shù)瀏覽器所支持，如果你的網(wǎng)站需要支持 IE6+，那以 userData 作為你的 polyfill 的方案是種不錯的選擇。
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| localStorage | 4 | 3.5 | 8 | 10.50 | 4 |
| sessionStorage | 5 | 2 | 8 | 10.50 | 4 |
sessionStorage 與 localStorage 的接口類似，但保存數(shù)據(jù)的生命周期與 localStorage 不同。做過后端開發(fā)的同學(xué)應(yīng)該知道 Session 這個詞的意思，直譯過來是“會話”。而 sessionStorage 是一個前端的概念，它只是可以將一部分?jǐn)?shù)據(jù)在當(dāng)前會話中保存下來，刷新頁面數(shù)據(jù)依舊存在。但當(dāng)頁面關(guān)閉后，sessionStorage 中的數(shù)據(jù)就會被清空。
三者的異同| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 數(shù)據(jù)的生命期 | 可設(shè)置失效時間，默認(rèn)是關(guān)閉瀏覽器后失效 | 除非被清除，否則永久保存 | 僅在當(dāng)前會話下有效，關(guān)閉頁面或瀏覽器后被清除 |
| 存放數(shù)據(jù)大小 | 4K左右 | 一般為5MB | 一般為5MB |
| 與服務(wù)器端通信 | 每次都會攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題 | 僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信 | 僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信 |
| 易用性 | 需要程序員自己封裝，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持 | 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持 |
有了對上面這些差別的直觀理解，我們就可以討論三者的應(yīng)用場景了。
因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息，所以 Cookie 當(dāng)然是能精簡就精簡啦，比較常用的一個應(yīng)用場景就是判斷用戶是否登錄。針對登錄過的用戶，服務(wù)器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當(dāng)前用戶是否登錄啦。曾經(jīng)還使用 Cookie 來保存用戶在電商網(wǎng)站的購物車信息，如今有了 localStorage，似乎在這個方面也可以給 Cookie 放個假了~
而另一方面 localStorage 接替了 Cookie 管理購物車的工作，同時也能勝任其他一些工作。比如HTML5游戲通常會產(chǎn)生一些本地數(shù)據(jù)，localStorage 也是非常適用的。如果遇到一些內(nèi)容特別多的表單，為了優(yōu)化用戶體驗，我們可能要把表單頁面拆分成多個子頁面，然后按步驟引導(dǎo)用戶填寫。這時候 sessionStorage 的作用就發(fā)揮出來了。
安全性的考慮需要注意的是，不是什么數(shù)據(jù)都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，需要時刻注意是否有代碼存在 XSS 注入的風(fēng)險。因為只要打開控制臺，你就隨意修改它們的值，也就是說如果你的網(wǎng)站中有 XSS 的風(fēng)險，它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你系統(tǒng)中的敏感數(shù)據(jù)。
參考資料what is the difference between localStorage, sessionStorage, session and cookie?
HTML5 localStorage security
維基百科 - Cookie
Web Storage API
瀏覽器本地數(shù)據(jù)（sessionStorage、localStorage、cookie）與server端數(shù)據(jù)
HTMl5的sessionStorage和localStorage
HTML5 LocalStorage 本地存儲
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85674.html
摘要：優(yōu)異的性能表現(xiàn)，有一部分原因要歸功于瀏覽器存儲技術(shù)的提升。是服務(wù)端生成，客戶端進(jìn)行維護(hù)和存儲。當(dāng)超過時，它將面臨被裁切的命運。此外很多瀏覽器對一個站點的個數(shù)也是有限制的。存入讀取數(shù)據(jù)保存的數(shù)據(jù)，以鍵值對的形式存在。 前言 隨著移動網(wǎng)絡(luò)的發(fā)展與演化，我們手機上現(xiàn)在除了有原生 App，還能跑WebApp——它即開即用，用完即走。一個優(yōu)秀的 WebApp 甚至可以擁有和原生 App 媲美的功...
摘要：如圖圖顧名思義，，是級別的存儲。如筆者寫的一篇淺析文章聊一聊百度移動端首頁前端速度那些事兒讀者們可以嘗試使用。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/frontenddriver 在web開發(fā)越來越復(fù)雜的今天，前端擁有的能力也越來越多。其中最重要的一項莫過于web存儲。...
摘要：不是很安全，別人可以分析存放在本地的并進(jìn)行欺騙，考慮到安全應(yīng)當(dāng)使用。因此不是一種持久化的本地存儲，僅僅是會話級別的存儲。用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。 前言 總括：詳細(xì)講述Cookie,LocalStorge,SesstionStorge的區(qū)別和用法。 人生如畫，歲月如歌。 原文博客地址：Javascript本地存儲小結(jié) 知乎專欄&&簡書專題：前端...
摘要：的區(qū)別及用法是本地存儲，存儲在客戶端，包括和。僅在當(dāng)前會話下有效，關(guān)閉頁面或瀏覽器后被清除。源生接口可以接受，亦可再次封裝來對和有更好的支持。但需要程序員自己封裝，源生的接口不友好。每個最多只能有條，每個長度不能超過。 localStorage、sessionStorage、Cookie的區(qū)別及用法 showImg(https://segmentfault.com/img/bVYLlH...
閱讀 2040·2023-04-26 02:15
閱讀 2309·2021-11-19 09:40
閱讀 1051·2021-10-27 14:13
閱讀 3322·2021-08-23 09:44
閱讀 3622·2019-12-27 12:24
閱讀 661·2019-08-30 15:53
閱讀 1175·2019-08-30 10:53
閱讀 2167·2019-08-26 12:14
