首先我們來思考幾個問題：
1.什么是web存儲？
2.h5引入web存儲的原因？
3.web存儲的方式有哪些？
使用html5在本地存儲用戶的瀏覽數據，之前采用的cookie的形式，但是cookie存儲的數據量少而且效率底，進而引入了web存儲，客戶端存儲數據的方式有兩種：localStorage，永久性存儲，除非自己刪除，sessionStorage，關閉瀏覽器之后就會清空。
localStorage
常用的可使用的api：
保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
刪除單個數據：localStorage.removeItem(key);
刪除所有數據：localStorage.clear();
得到某個索引的key：localStorage.key(index);
幾個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="對不起，您的瀏覽器不支持 web 存儲。";
}
</script>
</body>
</html>
運行的結果：
2017-08-07_214611.jpg
查看storage
chorme瀏覽器下打開開發工具（F12），找到application，然后選擇它就可以看到storage，你可以在這里進行數據的清除。
2017-08-07_214828.jpg
sessionStorage
關于sessionStorage和localStorage使用api是相同的，只不過它是臨時存儲，關閉瀏覽器就會自動清除。
計數的例子：
<!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>刷新頁面會看到計數器在增長。</p>
<p>請關閉瀏覽器窗口，然后再試一次，計數器已經重置了。</p>
</body>
</html>
