最近在找暑期實習,其中百度、網易遊戲、阿里的面試都問到一些關於HTML5的東西,問題大多是這樣開頭的:“你用過什麼HTML5的技術呀?” 而後,每次都能扯到 Cookie 和 localStorage 有啥差別。這篇文章就旨在詳細地闡述這部分內容,而具體 Web Storage API 的使用可以參考MDN的文檔,就不在這篇文章中贅述了。
基本概念
Cookie
Cookie 是小甜餅的意思。顧名思義,cookie 確實非常小,它的大小限制爲4KB左右,是網景公司的前僱員 Lou Montulli 在1993年3月的發明。它的主要用途有保存登錄信息,比如你登錄某個網站市場可以看到“記住密碼”,這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現的。
localStorage
localStorage 是 HTML5 標準中新加入的技術,它並不是什麼劃時代的新東西。早在 IE 6 時代,就有一個叫 userData 的東西用於本地存儲,而當時考慮到瀏覽器兼容性,更通用的方案是使用 Flash。而如今,localStorage 被大多數瀏覽器所支持,如果你的網站需要支持 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
sessionStorage 與 localStorage 的接口類似,但保存數據的生命週期與 localStorage 不同。做過後端開發的同學應該知道 Session 這個詞的意思,直譯過來是“會話”。而 sessionStorage 是一個前端的概念,它只是可以將一部分數據在當前會話中保存下來,刷新頁面數據依舊存在。但當頁面關閉後,sessionStorage 中的數據就會被清空。
三者的異同
特性 | Cookie | localStorage | sessionStorage |
---|---|---|---|
數據的生命期 | 可設置失效時間,默認是關閉瀏覽器後失效 | 除非被清除,否則永久保存 | 僅在當前會話下有效,關閉頁面或瀏覽器後被清除 |
存放數據大小 | 4K左右 | 一般爲5MB | 一般爲5MB |
與服務器端通信 | 每次都會攜帶在HTTP頭中,如果使用cookie保存過多數據會帶來性能問題 | 僅在客戶端(即瀏覽器)中保存,不參與和服務器的通信 | 僅在客戶端(即瀏覽器)中保存,不參與和服務器的通信 |
易用性 | 需要程序員自己封裝,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封裝來對Object和Array有更好的支持 | 源生接口可以接受,亦可再次封裝來對Object和Array有更好的支持 |
應用場景
有了對上面這些差別的直觀理解,我們就可以討論三者的應用場景了。
因爲考慮到每個 HTTP 請求都會帶着 Cookie 的信息,所以 Cookie 當然是能精簡就精簡啦,比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶,服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼,下次只要讀取這個值就可以判斷當前用戶是否登錄啦。曾經還使用 Cookie 來保存用戶在電商網站的購物車信息,如今有了 localStorage,似乎在這個方面也可以給 Cookie 放個假了~
而另一方面 localStorage 接替了 Cookie 管理購物車的工作,同時也能勝任其他一些工作。比如HTML5遊戲通常會產生一些本地數據,localStorage 也是非常適用的。如果遇到一些內容特別多的表單,爲了優化用戶體驗,我們可能要把表單頁面拆分成多個子頁面,然後按步驟引導用戶填寫。這時候 sessionStorage 的作用就發揮出來了。
安全性的考慮
需要注意的是,不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候,需要時刻注意是否有代碼存在 XSS 注入的風險。因爲只要打開控制檯,你就隨意修改它們的值,也就是說如果你的網站中有 XSS 的風險,它們就能對你的 localStorage 肆意妄爲。所以千萬不要用它們存儲你係統中的敏感數據。