javascript定時(shí)保存表單數(shù)據(jù)的代碼
更新時(shí)間：2011年03月17日 00:18:22 作者：
我相信有不少TX用過(guò)QQ或163的郵箱吧？他們中有一個(gè)比較有用且有趣的功能，如果您在編寫(xiě)郵件，那在固定一個(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ú)真相嘛：
<!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>
將這段html復(fù)制下來(lái)運(yùn)行一下，你就會(huì)發(fā)現(xiàn)，其實(shí)這跟郵箱中的定時(shí)保存基本一致了，在潤(rùn)色一下就OK了。
大家看下利用userData實(shí)現(xiàn)客戶端保存表單數(shù)據(jù) 這篇文章。
那這個(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>
將這段html復(fù)制下來(lái)運(yùn)行一下，你就會(huì)發(fā)現(xiàn)，其實(shí)這跟郵箱中的定時(shí)保存基本一致了，在潤(rùn)色一下就OK了。
大家看下利用userData實(shí)現(xiàn)客戶端保存表單數(shù)據(jù) 這篇文章。
您可能感興趣的文章:
- js檢測(cè)離開(kāi)或刷新頁(yè)面時(shí)表單數(shù)據(jù)是否更改的方法
- jquery ajax 如何向jsp提交表單數(shù)據(jù)
- 深入分析JSON編碼格式提交表單數(shù)據(jù)
- 一個(gè)檢測(cè)表單數(shù)據(jù)的JavaScript實(shí)例
- JSP 重置按鈕清空傳入的表單數(shù)據(jù)實(shí)例
- js清空表單數(shù)據(jù)的兩種方式(遍歷+reset)
- javascript檢查表單數(shù)據(jù)是否改變的方法
- js下利用userData實(shí)現(xiàn)客戶端保存表單數(shù)據(jù)
- 利用JS輕松實(shí)現(xiàn)獲取表單數(shù)據(jù)
相關(guān)文章
JavaScript實(shí)現(xiàn)MIPS乘法模擬的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)MIPS乘法模擬的方法,實(shí)例分析了JavaScript實(shí)現(xiàn)MIPS乘法模擬的運(yùn)算技巧,需要的朋友可以參考下2015-04-04
基于JS實(shí)現(xiàn)無(wú)縫滾動(dòng)思路及代碼分享
無(wú)縫滾動(dòng)效果在各大網(wǎng)站都有這樣的需求，應(yīng)用非常廣泛，下面小編給大家分享基于JS實(shí)現(xiàn)無(wú)縫滾動(dòng)思路及代碼，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看下吧2016-06-06
js實(shí)現(xiàn)的訂閱發(fā)布者模式簡(jiǎn)單示例
這篇文章主要介紹了js實(shí)現(xiàn)的訂閱發(fā)布者模式,結(jié)合完整示例形式分析了js訂閱發(fā)布者模式相關(guān)實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2020-03-03
微信小程序后端實(shí)現(xiàn)授權(quán)登錄
這篇文章主要介紹了微信小程序后端實(shí)現(xiàn)授權(quán)登錄,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
javascript判斷并獲取注冊(cè)表中可信任站點(diǎn)的方法
這篇文章主要介紹了javascript判斷并獲取注冊(cè)表中可信任站點(diǎn)的方法,可實(shí)現(xiàn)針對(duì)域名和IP的可信任站點(diǎn)判斷功能,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了微信小程序-頁(yè)面間值傳遞的2種方法，每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
原生js實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫(huà)效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)jquery函數(shù)animate()動(dòng)畫(huà)效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JavaScript Eval 函數(shù)使用,需要的朋友可以參考下。2010-03-03
JavaScript實(shí)現(xiàn)Date()日期格式化的3種常用方法
Date()日期對(duì)象是一個(gè)構(gòu)造函數(shù),必須使用new來(lái)調(diào)用創(chuàng)建我們的日期對(duì)象,下面這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)Date()日期格式化的3種常用方法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了JS變量存儲(chǔ)深拷貝和淺拷貝,想深入了解JS的同學(xué)，可以參考下2021-05-05