最近做一个输入框失去焦点时自动保存数据的功能,当然就是jquery选择器选择input,blur时,ajax提交数据给php文件,php文件保存一下数据,主要是要注意一下中文的问题,所以中间需要转一下编码.
下面的实例是一个列表页,有一点类似excel了,html代码如下:
{$id} {$description} 预览编辑

js代码如下:

php代码,引用了dedecms的函数、方法,代码如下:
if($dopost=='ajaxsave') { $value = urldecode(autocharset($value,utf-8,gb2312)); //更新主表 $inquery = update `#@__archives` set $field='$value' where id='$aid'; if($dsql->executenonequery($inquery)) { echo true ; exit; }else{ echo false; exit; } }
方法二,定时保存草稿功能,防止数据意外丢失.
情况介绍,网站后台编辑器是采用了百度ueditor所见即所得编辑器,我们就是要实现自动定时保存编辑器里的内容.
编辑器的调用方式如下:

在发表页面或编辑页的最后加入js调用标签:

localstorag.js 的代码如下:
/*注意: 本js脚本请在网页源代码最后的地方放置*/ if (!window.localstorage) { alert('您的浏览器不支持 localstorage 技术!');} else { var spanobj = document.getelementbyid('s1'); var savetimer = setinterval(function () { var str = ; if (document.all) { /*ie*/ str = document.frames[1].document.body.innerhtml; } else { /*chrome,ff*/ str = document.getelementbyid(ueditor_0).contentdocument.body.innerhtml; } if (str.length > 20 && (str.indexof(。) > -1 || str.indexof(，) > -1)) { /*有内容才保存 且有句号或逗号*/ localstorage.setitem(ctvalue, str); var d = new date(); var ymdhms = d.getfullyear() + - + (d.getmonth() + 1) + - + d.getdate() + + d.gethours() + : + d.getminutes() + : + d.getseconds(); spanobj.innertext = '（数据保存于: ' + ymdhms + '）'; settimeout(function () { spanobj.innertext = ''; }, 5000); } }, 25000); //每隔n秒保存一次 function stoplocs() { clearinterval(savetimer); //停止保存 //localstorage.removeitem(ctvalue); //清空 } function showlocs() { var html = localstorage.getitem(ctvalue); editor.setcontent(html); //alert(localstorage.getitem(ctvalue)); }}
可以增加停止保存按钮或立即恢复按钮,如下:
停止保存 立即恢复
好了,现在你的网站发表页面/编辑页面就具备自动保存功能了,注意这种方式支持ie8及以上版本的ie,chrome，firefox等等大多数主流浏览器,至于ie6,实在是老掉牙了,不在考虑范围内,如果一定要考虑ie6的,请使用上面提供的ie6/ie7兼容方案.
本文地址：
转载随意，但请附上文章地址:-)