首先我們來思考幾個(gè)問題：
1.什么是web存儲(chǔ)丢习？
2.h5引入web存儲(chǔ)的原因？
3.web存儲(chǔ)的方式有哪些锁施？
使用html5在本地存儲(chǔ)用戶的瀏覽數(shù)據(jù)陪踩，之前采用的cookie的形式杖们，但是cookie存儲(chǔ)的數(shù)據(jù)量少而且效率底，進(jìn)而引入了web存儲(chǔ)肩狂，客戶端存儲(chǔ)數(shù)據(jù)的方式有兩種：localStorage摘完，永久性存儲(chǔ)，除非自己刪除傻谁，sessionStorage孝治，關(guān)閉瀏覽器之后就會(huì)清空。
localStorage
常用的可使用的api：
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個(gè)索引的key：localStorage.key(index);
幾個(gè)api的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
localStorage.sitename="測試";
localStorage.setItem("test","測試");
var res=localStorage.getItem('test');
document.getElementById("result").innerHTML=res;
localStorage.removeItem("test");
//localStorage.clear();
document.getElementById("result").innerHTML+="<br/>"+localStorage.key(2);
}
else
{
document.getElementById("result").innerHTML="對(duì)不起审磁，您的瀏覽器不支持 web 存儲(chǔ)谈飒。";
}
</script>
</body>
</html>
運(yùn)行的結(jié)果：
查看storage
chorme瀏覽器下打開開發(fā)工具（F12），找到application力图，然后選擇它就可以看到storage步绸，你可以在這里進(jìn)行數(shù)據(jù)的清除掺逼。
sessionStorage
關(guān)于sessionStorage和localStorage使用api是相同的吃媒，只不過它是臨時(shí)存儲(chǔ)，關(guān)閉瀏覽器就會(huì)自動(dòng)清除吕喘。
計(jì)數(shù)的例子：
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else{
sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
<p>刷新頁面會(huì)看到計(jì)數(shù)器在增長赘那。</p>
<p>請(qǐng)關(guān)閉瀏覽器窗口，然后再試一次氯质，計(jì)數(shù)器已經(jīng)重置了募舟。</p>
</body>
</html>
