一聚教程网:一个值得你收藏的教程网站

热门教程

css实现刷新页面的同时保存页面控件的输入值

时间:2022-06-25 10:07:03 编辑:袖梨 来源:一聚教程网

在Head中加入

添加css: input{behavior:url(#default#savehistory)};

e.g. 页面上存在

给 input输入值后刷新页面看看,输入的值还在

例子

 代码如下 复制代码















还有一种真正的实现办法就是js ajax保存草稿功能

首先是表单页面:

 代码如下 复制代码


<textarea cols="10" rows="6" id="content">






=====以下代码存成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处理部份大家与其它的保存数据是一样的。

热门栏目