HTML5 Web 存儲(chǔ)
HTML5 Web 儲(chǔ)存體
使用HTML5可以在本機(jī)儲(chǔ)存使用者的瀏覽資料。
早期,本地儲(chǔ)存使用的是cookies。但是Web 儲(chǔ)存需要更加的安全與快速. 這些數(shù)據(jù)不會(huì)被保存在伺服器上，但是這些數(shù)據(jù)只用於用戶請(qǐng)求網(wǎng)站數(shù)據(jù)上.它也可以儲(chǔ)存大量的數(shù)據(jù)，而不影響網(wǎng)站的性能.
HTML5本地儲(chǔ)存之Web Storage
#Web Storage是HTML5引入的一個(gè)非常重要的功能，在前端開發(fā)中經(jīng)常用到，可以在客戶端本地儲(chǔ)存數(shù)據(jù)，類似HTML4的cookie，但可實(shí)現(xiàn)功能比cookie強(qiáng)大的多，cookie大小被限制在4KB，Web Storage官方建議為每個(gè)網(wǎng)站5MB。 Web Storage又分為兩種：
?sessionStorage
?localStorage
#從字面意思就可以很清楚的看出來，sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉也就沒了；而localStorage則一直將數(shù)據(jù)保存在客戶端本地，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的；不管是sessionStorage，還是localStorage，可用的API都相同，常用的有以下幾個(gè)方法：
?保存資料：localStorage.setItem( key, value ); ? ? ?sessionStorage.setItem( key , value );
?讀取資料：localStorage.getItem( key ); ? ??sessionStorage.getItem( key ); ?
?刪除單一資料：localStorage.remItemItem( key key); );
?刪除所有資料：localStorage.clear( ); ? ??sessionStorage.clear( );
?得到某個(gè)索引的key：localStorage.key( index ); ? ??sessionStorage.key( torage.key( index ); ? ??sessionStorage. ;
兩者都有屬性length 表示key 的個(gè)數(shù)，也即key 長(zhǎng)度：
var keyLength1 =?localStorage.length; ?var keyLength2 ?=?sessionStorage.length; ?var keyLength2 ?=?sessionStorage .length;?
如上，key 和value 都必須為字串，換言之，web Storage的API只能操作字串。
在使用web 儲(chǔ)存前,應(yīng)檢查瀏覽器是否支援localStorage 和sessionStorage:
if(typeof(Storage)! =="undefined")
{ ? ?// 是的! 支援 localStorage ?sessionStorage 物件! ??
? ?// 一些程式碼.....
} else { ??
?// 抱歉! 不支援 web 儲(chǔ)存。
}
實(shí)例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5--本地存儲(chǔ)</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已經(jīng)點(diǎn)擊了按鈕 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="對(duì)不起，您的瀏覽器不支持 web 存儲(chǔ)。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">點(diǎn)我！</button></p>
<div id="result"></div>
<p>點(diǎn)擊該按鈕查看計(jì)數(shù)器的增加。</p>
<p>關(guān)閉瀏覽器選項(xiàng)卡(或窗口),重新打開此頁面,計(jì)數(shù)器將繼續(xù)計(jì)數(shù)(不是重置)。</p>
</body>
</html>
