一、本地存儲由來的背景
眾所周知Html4時代Cookie的大小破花、格式、存儲數(shù)據(jù)格式等限制，網(wǎng)站應(yīng)用如果想在瀏覽器端存儲用戶的部分信息劲弦，那么只能借助于Cookie。但是Cookie的這些限制勇吊，也就導(dǎo)致了Cookie只能存儲一些ID之類的標(biāo)識符等簡單的數(shù)據(jù)辫愉，復(fù)雜的數(shù)據(jù)就更別扯了。
下面是Cookie的限制：
1, 大多數(shù)瀏覽器支持最大為 4096 字節(jié)的 Cookie族铆。
2, 瀏覽器還限制站點可以在用戶計算機上存儲的 Cookie 的數(shù)量岩四。大多數(shù)瀏覽器只允許每個站點存儲 20 個 Cookie；如果試圖存儲更多 Cookie哥攘，則最舊的 Cookie 便會被丟棄剖煌。
3, 有些瀏覽器還會對它們將接受的來自所有站點的 Cookie 總數(shù)作出絕對限制材鹦，通常為 300 個。
4, Cookie默認情況都會隨著Http請求發(fā)送到后臺服務(wù)器耕姊，但并不是所有請求都需要Cookie的桶唐，比如：js、css茉兰、圖片等請求則不需要cookie尤泽。
Html5的設(shè)計者們，一開始就為Html5能成為富客戶端做好了準(zhǔn)備邦邦。為了破解Cookie的一系列限制安吁，Html5通過JS的新的API就能直接存儲大量的數(shù)據(jù)到客戶端瀏覽器，而且支持復(fù)雜的本地數(shù)據(jù)庫燃辖，讓JS簡直就是逆天了鬼店。Html5支持兩種的WebStorage，一種是永久性的本地存儲（localStorage）黔龟，另外一種是會話級別的本地存儲（sessionStorage）妇智。
二、會話級別的本地存儲：sessionStorage
在Html5中增加了一個Js對象：sessionStorage氏身；通過此對象可以直接操作存儲在瀏覽器中的會話級別的WebStorage巍棱。存儲在sessionStorage中的數(shù)據(jù)首先是Key-Value形式的，另外就是它跟瀏覽器當(dāng)前會話相關(guān)蛋欣，當(dāng)會話結(jié)束后航徙，數(shù)據(jù)會自動清除，跟未設(shè)置過期時間的Cookie類似陷虎。
sessionStorage提供了四個方法來輔助我們進行對本地存儲做相關(guān)操作到踏。
（1）setItem(key,value)：添加本地存儲數(shù)據(jù)。兩個參數(shù)尚猿，非常簡單就不說了窝稿。
（2）getItem(key):通過key獲取相應(yīng)的Value。
（3）removeItem(key):通過key刪除本地數(shù)據(jù)凿掂。
（4）clear():清空數(shù)據(jù)伴榔。
//添加key-value 數(shù)據(jù)到 sessionStorage
sessionStorage.setItem("demokey", "http://blog.itjeek.com");
//通過key來獲取value
var dt = sessionStorage.getItem("demokey");
alert(dt);
//清空所有的key-value數(shù)據(jù)。
//sessionStorage.clear();
alert(sessionStorage.length);
對于JS的學(xué)習(xí)和調(diào)試必須得有Chrome的調(diào)試工具輔助才能事半功倍庄萎。當(dāng)然Chrome也是我最喜愛的Web開發(fā)輔助工具踪少，非常簡單F12快捷鍵就立即打開工具了，包括IE也是這個快捷鍵糠涛。通過下圖就可以查看當(dāng)前瀏覽器中的sessionStorage數(shù)據(jù)援奢。
三、永久本地存儲：localStorage
在最新的JS的API中增加了localStorage對象脱羡，以便于用戶存儲永久存儲的Web端的數(shù)據(jù)萝究。而且數(shù)據(jù)不會隨著Http請求發(fā)送到后臺服務(wù)器免都，而且存儲數(shù)據(jù)的大小機會不用考慮，因為在HTML5的標(biāo)準(zhǔn)中要求瀏覽器至少要支持到4MB.所以帆竹，這完全是顛覆了Cookie的限制绕娘，為Web應(yīng)用在本地存儲復(fù)雜的用戶痕跡數(shù)據(jù)提供非常方便的技術(shù)支持。那接下里分別介紹一下localStorage的常用的方法栽连，當(dāng)然基本上跟sessionStorage是一致的险领。
localStorage提供了四個方法來輔助我們進行對本地存儲做相關(guān)操作。
（1）setItem(key,value)：添加本地存儲數(shù)據(jù)秒紧。兩個參數(shù)绢陌，非常簡單就不說了。
（2）getItem(key):通過key獲取相應(yīng)的Value熔恢。
（3）removeItem(key):通過key刪除本地數(shù)據(jù)脐湾。
（4）clear():清空數(shù)據(jù)。
//添加key-value 數(shù)據(jù)到 sessionStorage
localStorage.setItem("demokey", "http://blog.itjeek.com");
//通過key來獲取value
var dt = localStorage.getItem("demokey");
alert(dt);
//清空所有的key-value數(shù)據(jù)叙淌。
//localStorage.clear();
alert(localStorage.length);
