快捷導(dǎo)航

javascript定時(shí)保存表單數(shù)據(jù)的代碼

更新時(shí)間：2011年03月17日 00:18:22 作者：

我相信有不少TX用過(guò)QQ或163的郵箱吧？他們中有一個(gè)比較有用且有趣的功能，如果您在編寫郵件，那在固定一個(gè)時(shí)間頻率內(nèi)，它會(huì)自動(dòng)將您的郵件內(nèi)容保存起來(lái)，以免丟失。

（忘記是不是兩家郵箱都有這個(gè)功能）。
那這個(gè)功能是怎么做的呢？

定時(shí)，我們知道怎么弄，但保存呢？也許我們會(huì)通過(guò)隱藏域等手段來(lái)存放數(shù)據(jù)。但是，這個(gè)卻有個(gè)缺點(diǎn)：那就是刷新頁(yè)面后，數(shù)據(jù)將會(huì)丟失。
而此時(shí)，就該輪到我們很少關(guān)注，而且估計(jì)有不少人不知道的UserData 行為（userData Behavior）登場(chǎng)了：
而這個(gè)UserData是什么？怎么用？，我將在文章最后轉(zhuǎn)載一篇介紹它的文章。
現(xiàn)在，我直接上例子，所謂無(wú)代碼，無(wú)真相嘛：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> new document </title> 
<meta name="generator" content="editplus" /> 
<meta name="author" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<script type="text/javascript"> 

window.onload=function(){ 

var txtObj = document.getElementById('txt1'); 
var spanObj = document.getElementById('s1'); 

//自動(dòng)保存 
txtObj.addBehavior("#default#userData"); 

var saveTimer= setInterval(function(){ 
txtObj.setAttribute('OValue',txtObj.value); 
txtObj.save('SavedData'); 

spanObj.innerText='數(shù)據(jù)保存于：'+(new Date()); 
setTimeout(function(){ 
spanObj.innerText=''; 
},1000); 

},10000); //每分鐘保存一次 

document.getElementById('btn1').attachEvent('onclick',function(){ 
clearInterval(saveTimer); //取消保存 
txtObj.removeAttribute('OValue'); 
}); 

document.getElementById('btn2').attachEvent('onclick',function(){ 
txtObj.load('SavedData'); 
alert(txtObj.getAttribute('OValue')); 
//txtObj.value = txtObj.getAttribute('OValue'); 
}); 
}; 

</script> 
</head> 

<body> 
<span id="s1" style="color:red;"></span> 
<p /> 
<textarea height="500" style="height:500px;width:500px;" id="txt1"> 
</textarea> 
<p /> 
<input type="button" id="btn1" value="停止保存" /> 
<input type="button" id="btn2" value="獲取保存的值" /> 
</body> 
</html> 