三者的異同
特性 | Cookie | localStorage | sessionStorage |
---|---|---|---|
資料的生命期 | 可設定失效時間,預設是關閉浏覽器後失效 | 除非被清除,否則永久儲存 | 僅在目前會話下(tab标簽頁)有效,新開tab标簽頁或關閉浏覽器後被清除 |
存放資料大小 | 4K左右 | 一般為5MB | |
與伺服器端通信 | 每次都會攜帶在HTTP頭中,如果使用cookie儲存過多資料會帶來性能問題 | 僅在用戶端(即浏覽器)中儲存,不參與和伺服器的通信 | |
易用性 | 需要程式員自己封裝,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封裝來對Object和Array有更好的支援 |
作用域不同,sessionStorage不能在不同的浏覽器視窗中共享,即使是同一個頁面;localStorage 在所有同源視窗中都是共享的;cookie也是在所有同源視窗中都是共享的。Web Storage 支援事件通知機制,可以将資料更新的通知發送給監聽者。WebStorage 的 api 接口使用更友善。
應用場景
有了對上面這些差别的直覺了解,我們就可以讨論三者的應用場景了。
因為考慮到每個 HTTP 請求都會帶着 Cookie 的資訊,是以 Cookie 當然是能精簡就精簡啦,比較常用的一個應用場景就是判斷使用者是否登入。針對登入過的使用者,伺服器端會在他登入時往 Cookie 中插入一段加密過的唯一辨識單一使用者的辨識碼,下次隻要讀取這個值就可以判斷目前使用者是否登入啦。曾經還使用 Cookie 來儲存使用者在電商網站的購物車資訊,如今有了 localStorage,似乎在這個方面也可以給 Cookie 放個假了~
而另一方面 localStorage 接替了 Cookie 管理購物車的工作,同時也能勝任其他一些工作。比如HTML5遊戲通常會産生一些本地資料,localStorage 也是非常适用的。如果遇到一些内容特别多的表單,為了優化使用者體驗,我們可能要把表單頁面拆分成多個子頁面,然後按步驟引導使用者填寫。這時候 sessionStorage 的作用就發揮出來了。
安全性的考慮
需要注意的是,不是什麼資料都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候,需要時刻注意是否有代碼存在 XSS 注入的風險。因為隻要打開控制台,你就随意修改它們的值,也就是說如果你的網站中有 XSS 的風險,它們就能對你的 localStorage 肆意妄為。是以千萬不要用它們存儲你系統中的敏感資料。
Storage類的相關成員如下:
成員名 | 方法參數 | 描述 |
length | 屬性 | 擷取存儲資料的條數 |
key(n) | n:索引值 | 根據索引值,傳回鍵名 |
getItem(key) | key:鍵名 | 根據鍵名,擷取資料值 |
setItem(key,value) | key:鍵名 value:鍵值 | 根據鍵名和鍵值設定資料項,如果鍵名已經存在,則覆寫值 |
removeItem(key) | 根據鍵名删除一個資料項 | |
clear() | 無 | 清空目前的Storage對象 |
其用法:
參數設定很簡單,如下例:
localStorage.setItem('age', 40);
通路一個存儲的資料一樣很容易:
= .getItem('age');
可以這樣删除一個特定的鍵值對:
localStorage.removeItem('age');
或者删除所有的鍵值對:
localStorage.clear();
sessionStorage與頁面 js 資料對象的差別:
sessionStorage隻要是同源的同視窗(Tab)中,重新整理頁面或者進入不同的頁面資料對象仍然被儲存,也就是說隻要浏覽器視窗不關閉,加載頁面(同源)或重新整理頁面,資料仍存在。