AJAX应用之草稿自动保存

2024-09-01 08:29:53

字体：大中小

来源：转载

供稿：网友

相信用过Gmail的人都知道Gmail有一个草稿自动保存的功能，每过一段时间，Gmail都会自动保存邮件草稿，这样在一些突发情况下就能快速地恢复工作，免得写了半天的邮件眨眼之间就没有了。在学了AJAX之后，我也给自己的blog加上了这个功能。当然，这个应用并不只限于blog上，应该说还是比较通用的。

PS.为了开发的方便，我用了一个自己写的AJAX类，具体内容和下载在这里。

演示地址，我的blog

仍旧以代码加注释来方式来说明怎么编写。

首先是表单填写页面，用一个ID为AutoSaveMsg的DIV来显示返回信息，并且用一个ID为Draft_AutoSave的CheckBox来确定是否进行自动保存，然后将Textarea的ID命名为message。同时为了应对多用户同时使用的需要，加上用户名，每个用户的草稿分开保存。为了说明方便，我把一些修饰性的东西去掉，这样看起来比较明了：
代码如下:
AJAX应用之草稿自动保存<br />

用户名：<input type="text" name="memName" id="memName" size="20" value="NONAME" />

<input onclick="SetAutoSave();" type="checkbox" id="Draft_AutoSave" value="1" checked="true"  />自动保存？<br />
内容：
<textarea id="message"></textarea><br />

<div id="AutoSaveMsg"></div>
<input type="submit" value="提交内容" />

<input type="button" onclick="AutoSaveRestore();" value="恢复最后保存的草稿" />
</div>
</div>


<script type="text/javascript" src="ajaxrequest.js"></script>

<script type="text/javascript" src="autosave.js"></script>

接下来是autosave.js
代码如下:
// 首先设置全局变量
// 要保存的内容对象FormContent
var FormContent=document.getElementById("message");
// 显示返回信息的对象
var AutoSaveMsg=document.getElementById("AutoSaveMsg");
// 用户名
var memName=document.getElementById("memName").value;
// 自动保存时间间隔
var AutoSaveTime=60000;
// 计时器对象
var AutoSaveTimer;

// 首先设置一次自动保存状态
SetAutoSave();

// 自动保存函数

上一篇：AJAX客户端说明，XMLHttpRequest对象

下一篇：Ajax标签导航效果(仿网易首页)

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注