HTML5 Web 存儲
HTML5 Web 存儲
使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。
早些時(shí)候,本地存儲使用的是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，但可實(shí)現(xiàn)功能要比cookie強(qiáng)大的多，cookie大小被限制在4KB，Web Storage官方建議為每個網(wǎng)站5MB。Web Storage又分為兩種：
sessionStorage
localStorage
從字面意思就可以很清楚的看出來，sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉也就沒了；而localStorage則一直將數(shù)據(jù)保存在客戶端本地，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的；不管是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 存儲。
}
實(shí)例：
<!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)點(diǎn)擊了按鈕 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="對不起，您的瀏覽器不支持 web 存儲。";
}
}
</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>
![Beginnen Sie schnell mit dem Golang Gin-Framework [Verwenden Sie Gin, um ein gleichzeitiges IM-Instant-Messaging-System auf Millionenebene aufzubauen]](https://img.php.cn/upload/course/000/000/068/63a2b21046723283.jpg)
