HTML5 Web 存儲LOGIN

HTML5 Web 存儲

HTML5 Web 儲存體

使用HTML5可以在本機儲存使用者的瀏覽資料。

早期,本地儲存使用的是cookies。但是Web 儲存需要更加的安全與快速. 這些數據不會被保存在伺服器上,但是這些數據只用於用戶請求網站數據上.它也可以儲存大量的數據,而不影響網站的性能.

HTML5本地儲存之Web Storage

#Web Storage是HTML5引入的一個非常重要的功能,在前端開發中經常用到,可以在客戶端本地儲存數據,類似HTML4的cookie,但可實現功能比cookie強大的多,cookie大小被限制在4KB,Web Storage官方建議為每個網站5MB。 Web Storage又分為兩種:

 sessionStorage

 localStorage

#從字面意思就可以很清楚的看出來,sessionStorage將數據保存在session中,瀏覽器關閉也就沒了;而localStorage則一直將數據保存在客戶端本地,除非主動刪除數據,否則數據是永遠不會過期的;不管是sessionStorage,還是localStorage,可用的API都相同,常用的有以下幾個方法:

 保存資料:localStorage.setItem( key, value );      sessionStorage.setItem( key , value );

 讀取資料:localStorage.getItem( key );     sessionStorage.getItem( key );  

 刪除單一資料:localStorage.remItemItem( key key); );

 刪除所有資料:localStorage.clear( );     sessionStorage.clear( );

 得到某個索引的key:localStorage.key( index );     sessionStorage.key( torage.key( index );     sessionStorage. ;

兩者都有屬性length 表示key 的個數,也即key 長度:

var keyLength1 = localStorage.length;  var keyLength2  = sessionStorage.length;  var keyLength2  = sessionStorage .length; 

如上,key 和value 都必須為字串,換言之,web Storage的API只能操作字串。

在使用web 儲存前,應檢查瀏覽器是否支援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=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="对不起,您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我!</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>



下一節
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>php.cn</title> <style type="text/css"> textarea { width: 300px; height: 300px; } .button { width: 100px; } </style> </head> <body> <script type="text/javascript"> //使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 //页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 function saveSession() { var t1 = document.getElementById("t1"); var t2 = document.getElementById("t2"); var mydata = t2.value; var oStorage = window.sessionStorage; oStorage.mydata = mydata; t1.value += "sessionStorage保存mydata:" + mydata + "\n"; } function readSession() { var t1 = document.getElementById("t1"); var oStorage = window.sessionStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } t1.value += "sessionStorage读取mydata:" + mydata + "\n"; } function cleanSession() { var t1 = document.getElementById("t1"); var oStorage = window.sessionStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } oStorage.removeItem("mydata"); t1.value += "sessionStorage清除mydata:" + mydata + "\n"; } function saveStorage() { var t1 = document.getElementById("t1"); var t2 = document.getElementById("t2"); var mydata = t2.value; var oStorage = window.localStorage; oStorage.mydata = mydata; t1.value += "localStorage保存mydata:" + mydata + "\n"; } function readStorage() { var t1 = document.getElementById("t1"); var oStorage = window.localStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } t1.value += "localStorage读取mydata:" + mydata + "\n"; } function cleanStorage() { var t1 = document.getElementById("t1"); var oStorage = window.localStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } oStorage.removeItem("mydata"); t1.value += "localStorage清除mydata:" + mydata + "\n"; } </script> <div> <textarea id="t1"></textarea> <br> <label>需要保存的数据: </label> <br> <input type="text" id="t2" /> <input type="button" class="button" onclick="saveSession()" name="b1" value="session保存" /> <input type="button" class="button" onclick="readSession()" value="session读取" /> <input type="button" class="button" onclick="cleanSession()" value="session清除" /> <input type="button" class="button" onclick="saveStorage()" value="local保存" /> <input type="button" class="button" onclick="readStorage()" value="local读取" /> <input type="button" class="button" onclick="cleanStorage()" value="local清除" /> </div> </body> </html>
章節課件