萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> css實現刷新頁面的同時保存頁面控件的輸入值
css實現刷新頁面的同時保存頁面控件的輸入值
css實現刷新頁面的同時保存頁面控件的輸入值這個對於我們來講是非常好用了，像有些頁面不小心刷新了頁面表單值就丟失了需要重新輸入非常的麻煩，那麼我們可以使用css來定義頁面刷新值保存起來，具體設置如下。
在Head中加入<meta name="save" content="history">
添加css: input{behavior:url(#default#savehistory)};
e.g. 頁面上存在<input type=text id="txttestsavehistory"/>
給 input輸入值後刷新頁面看看，輸入的值還在
例子
代碼如下<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="save" content="history">
<title></title>
<mce:style type="text/css"><!--
input{behavior:url(#default#savehistory)};
--></mce:style><style type="text/css" mce_bogus="1">input{behavior:url(#default#savehistory)};</style>
</head>
<body>
<DIV style="float:left" mce_style="float:left">
<ul>
<li><label style="width:100px">hhhhh</label><input type="text" ></li>
<li><label style="width:100px">sssssssssss</label><input type="text" > </li>
</ul>
</DIV>
還有一種真正的實現辦法就是js ajax保存草稿功能
首先是表單頁面：
代碼如下<!-- 編寫文章的文本域 -->
<textarea cols="10" rows="6" id="content"></textarea>
<!-- AutoSaveMsg顯示返回信息 -->
<div id="AutoSaveMsg"></div>
<input type="button" onclick="AutoSaveRestore();" value="恢復最後保存的草稿">
<!-- 將JS代碼放在所有對象之後，以免在頁面未加載完成時出現對象不存在的錯誤 -->
<!-- AJAX類 -->
<script type="text/javascript" src="ajaxrequest.js"></script>
<!-- 自動保存代碼 -->
<script type="text/javascript" src="autosave.js"></script>
=====以下代碼存成autosave.js=====
代碼如下// 要保存的內容對象FormContent
var FormContent=document.getElementById("content");
// 顯示返回信息的對象
var AutoSaveMsg=document.getElementById("AutoSaveMsg");
// 自動保存時間間隔
var AutoSaveTime=60000;
// 計時器對象
var AutoSaveTimer;
// 首先設置一次自動保存狀態
SetAutoSave();
// 自動保存函數
function AutoSave()
{
// 如果內容為空，則不進行處理，直接返回
if(!FormContent.value) return;
// 創建AJAXRequest對象，
var ajaxobj=new AJAXRequest;
ajaxobj.url="inc/autosave.asp";
ajaxobj.content="postcontent="+escape(FormContent.value);
ajaxobj.callback=function(xmlObj)
{
// 顯示反饋信息
AutoSaveMsg.innerHTML=xmlObj.responseText;
}
ajaxobj.send();
}
// 設置自動保存狀態函數
function SetAutoSave()
{
AutoSaveTimer=setInterval("AutoSave()",AutoSaveTime);
}
// 恢復最後保存的草稿
function AutoSaveRestore()
{
// 創建AJAXRequest對象
var ajaxobj=new AJAXRequest;
AutoSaveMsg.innerHTML="正在恢復，請稍候……"
ajaxobj.url="inc/autosave.asp";
ajaxobj.content="action=restore";
ajaxobj.callback=function(xmlObj)
{
AutoSaveMsg.innerHTML="恢復最後保存成功";
// 如果內容為空則不改寫textarea的內容
if(xmlObj.responseText!="")
{
// 恢復草稿
FormContent.value=xmlObj.responseText;
}
}
ajaxobj.send()
}
原理非常的簡單就是當我們在設定的幾秒之後就會自動把我們指定文本框中的數據保存起來，這個比上面那個更適用哦，當然上面只寫了js部份php處理部份大家與其它的保存數據是一樣的。
