前言：在HTML5出現(xiàn)之前爸舒，為了保存用戶在網(wǎng)站中一些操作狀態(tài)橄霉，以便于下次打開(kāi)頁(yè)面時(shí)恢復(fù)到上次訪問(wèn)時(shí)的一些狀態(tài)嫌松，在瀏覽器端常常使用Cookie來(lái)存儲(chǔ)一些信息。最典型的應(yīng)用是判斷用戶是否登錄過(guò)網(wǎng)站萎羔。但是，Cookie的大小受限贾陷，每個(gè)Cookie的大小不超過(guò)4KB，瀏覽器一般只允許存放300個(gè)Cookie髓废，而且Cookie也存在安全性問(wèn)題巷懈。
好在HTML5為我們帶來(lái)了全新的本地存儲(chǔ)方式：localStorage瓦哎，有5M大小，而且從IE8就開(kāi)始支持了割岛。也就是說(shuō)IE6、7是不支持localStorage的犯助，Cookie可以成為IE6、7下的一種替代方案剂买。
以一個(gè)留言板為例,直接上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage demo</title>
</head>
<body>
<div>
<h3>簡(jiǎn)單的web存儲(chǔ)留言板</h3>
<textarea id="textarea"></textarea>
<input type="button" onclick="addInfo()" value="留言" />
<input type="button" onclick="cleanInfo()" value="清除留言" />
</div>
<script type="text/javascript">
function upInfo() {
if(window.localStorage){
var lStorage = window.localStorage;
var textarea = window.document.getElementById("textarea");
var text = lStorage.getItem("text");
if (text) {
textarea.value = text;
}else {
textarea.value = "還沒(méi)有留言";
}
}
}
function addInfo() {
if(window.localStorage){
var textarea = window.document.getElementById("textarea");
var lStorage = window.localStorage;
lStorage.setItem("text",textarea.value);
upInfo();
}
}
function cleanInfo() {
window.localStorage.removeItem("text");
upInfo();
}
upInfo();
</script>
</body>
</html>
這是用localStorage實(shí)現(xiàn)的一個(gè)簡(jiǎn)易留言板惠爽，留言板上的信息可以永久保存，即使關(guān)閉頁(yè)面后再次打開(kāi)瞬哼。同時(shí)也可以清除留言板的內(nèi)容婚肆。
這里我調(diào)用了setItem()方法，將對(duì)應(yīng)的名值對(duì)傳進(jìn)去坐慰，實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)较性。調(diào)用getItem()方法，將名字傳進(jìn)去结胀，可以獲取到對(duì)應(yīng)的值赞咙。調(diào)用removeItem()方法，將名字傳進(jìn)去糟港，可以刪除對(duì)應(yīng)的數(shù)據(jù)攀操。除此之外，如果想要?jiǎng)h除存儲(chǔ)對(duì)象的所有鍵值對(duì)的話秸抚，可以調(diào)用removeItem()方法速和。
目前瀏覽器似乎只支持存儲(chǔ)字符串類型的數(shù)據(jù)，所以我們想要存儲(chǔ)其他類型的數(shù)據(jù)耸别，不得不自己手動(dòng)進(jìn)行編碼和解碼健芭。
實(shí)現(xiàn)了“Web存儲(chǔ)”標(biāo)準(zhǔn)的瀏覽器在window對(duì)象上定義了兩個(gè)屬性：localStorage和sessionStorage，這兩個(gè)屬性都代表同一個(gè)Storage對(duì)象,因此他們具有相同的API秀姐。Storage對(duì)象的屬性值為字符串慈迈。
localStorage和sessionStorage的主要區(qū)別在于存儲(chǔ)的有效期和作用域不同。localStorage存儲(chǔ)的數(shù)據(jù)是永久性的省有，其作用域限定在文檔源級(jí)別（只要URL的協(xié)議痒留、端口、主機(jī)名三者中有一個(gè)不同蠢沿，就屬于不同的文檔源）伸头。除此之外，localStorage也受瀏覽器供應(yīng)商限制舷蟀，如果使用chrome訪問(wèn)一個(gè)網(wǎng)站恤磷，下次用firefox再次訪問(wèn)是獲取不到上次存儲(chǔ)的數(shù)據(jù)的面哼。
而sessionStorage的有效期僅存在于瀏覽器的標(biāo)簽頁(yè)。也就是說(shuō)如果關(guān)閉標(biāo)簽頁(yè)后扫步，通過(guò)sessionStorage存儲(chǔ)的數(shù)據(jù)就都被刪除了魔策。sessionStorage的作用域不僅被限制在文檔源，還被限定在窗口中河胎，也就是同一標(biāo)簽頁(yè)中闯袒。注意，這里說(shuō)的窗口是指頂級(jí)窗口游岳，若果同一標(biāo)簽頁(yè)中包含多個(gè)<iframe>元素政敢，這兩者之間也是可以共享sessionStorage的。
