1. 程式人生 > >Cookie, LocalStorage 與 SessionStorage

Cookie, LocalStorage 與 SessionStorage

Cookie
Cookie 是小甜餅的意思。顧名思義,cookie 確實非常小,它的大小限制為4KB左右,它的主要用途有儲存登入資訊,比如你登入某個網站市場可以看到“記住密碼”,這通常就是通過在 Cookie 中存入一段辨別使用者身份的資料來實現的。
localStorage
localStorage 是 HTML5 標準中新加入的技術,它並不是什麼劃時代的新東西。早在 IE 6 時代,就有一個叫 userData 的東西用於本地儲存,而當時考慮到瀏覽器相容性,更通用的方案是使用 Flash。而如今,localStorage 被大多數瀏覽器所支援,如果你的網站需要支援 IE6+,那以 userData 作為你的 polyfill 的方案是種不錯的選擇。
sessionStorage


sessionStorage 與 localStorage 的介面類似,但儲存資料的生命週期與 localStorage 不同。做過後端開發的同學應該知道 Session 這個詞的意思,直譯過來是“會話”。而 sessionStorage 是一個前端的概念,它只是可以將一部分資料在當前會話中儲存下來,重新整理頁面資料依舊存在。但當頁面關閉後,sessionStorage 中的資料就會被清空。
三者的異同
Cookie:一般由伺服器生成,可設定失效時間。如果在瀏覽器端生成Cookie,預設是關閉瀏覽器後失效,4K左右,每次都會攜帶在HTTP頭中,如果使用cookie儲存過多資料會帶來效能問題,需要程式設計師自己封裝,源生的Cookie介面不友好
localStorage:除非被清除,否則永久儲存,一般為5MB,僅在客戶端(即瀏覽器)中儲存,不參與和伺服器的通訊,源生介面可以接受,亦可再次封裝來對Object和Array有更好的支援
sessionStorage:僅在當前會話下有效,關閉頁面或瀏覽器後被清除,一般為5MB,僅在客戶端(即瀏覽器)中儲存,不參與和伺服器的通訊,源生介面可以接受,亦可再次封裝來對Object和Array有更好的支援