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