OfflineSave离线保存代码再次发布使用说明
代码 使用 发布 说明 保存 离线 再次
2023-06-13 09:13:56 时间
必知:所有需要处理的HTML元素必须具有ID属性,组件只会探测元素的ID属性
1. 在</Head>上加入
<STYLE>
.userData {behavior:url(#default#userdata);}
</STYLE>
2. 在<body>下加入
<INPUT type=text class=userData id=OfflineSave_Area style="display:none">
3. 在</body>上加入
<script src=OfflineSave.js></script>
4. 为form标签加入扩展属性OfflineSave
例:<form id=myOfflineSaveForm OfflineSave ToolsBarStyle="mycssclass">
ToolsBarStyle为css class属性,容器为div,包含select,input,button
注意:
情况1:
<form id=myform onsubmit="docheck(this)">
<input type=text id=mytext>
<input type=submit value=submit>
</form>
在这种情况下,组件可以自动探测服务器存活状态,如服务器无法连接时,会提示本地保存,
并且docheck函数也可以正常工作
情况2:
<form id=myform >
<input type=text id=mytext>
<input type=button value=submit onclick="myform.submit()">
</form>
在这种情况下,组件无法截获提交事件,也无法自动探测服务器存活状态
建议:检测表单内数据时,在form标签onsubmit事件内写入检测函数
联系我:qq:13872888 注明:blueidea
复制代码代码如下:
1. 在</Head>上加入
<STYLE>
.userData {behavior:url(#default#userdata);}
</STYLE>
2. 在<body>下加入
<INPUT type=text class=userData id=OfflineSave_Area style="display:none">
3. 在</body>上加入
<script src=OfflineSave.js></script>
4. 为form标签加入扩展属性OfflineSave
例:<form id=myOfflineSaveForm OfflineSave ToolsBarStyle="mycssclass">
ToolsBarStyle为css class属性,容器为div,包含select,input,button
注意:
情况1:
<form id=myform onsubmit="docheck(this)">
<input type=text id=mytext>
<input type=submit value=submit>
</form>
在这种情况下,组件可以自动探测服务器存活状态,如服务器无法连接时,会提示本地保存,
并且docheck函数也可以正常工作
情况2:
<form id=myform >
<input type=text id=mytext>
<input type=button value=submit onclick="myform.submit()">
</form>
在这种情况下,组件无法截获提交事件,也无法自动探测服务器存活状态
建议:检测表单内数据时,在form标签onsubmit事件内写入检测函数
联系我:qq:13872888 注明:blueidea
var os_Obj,os_usd;
var os_dg=document.getElementById;
var os_ButtonCss="style=\"cursor:hand;height:20px;padding:0px 3px;border:1px solid #67C1E4;\"";
var os_SelectCss="style=\"font-size:12px;\"";
var os_SaveSuccessStr="离线数据保存成功!";
var os_SaveProStr="请输入离线保存的名称:(如为空则用当前时间表示)";
var os_LoadProStr="确认要载入离线数据吗?";
var os_DelProStr="确认要删除离线数据吗?";
var os_DelSuccessStr="离线数据删除成功!";
var os_oUD="OfflineSave_oPersistInput";
var os_DefaultFiledLength=10;//Default Filed length
var os_str="OfflineSave_";
var os_CannotSaveStr="保存数据时出现错误![离线保存空间仅限640K]\n\n有可能已超出离线保存容量!请删除部分数据后再保存!";
var os_expires = (new Date(2010,1,1)).toUTCString();
InitOfflineSave();
function InitOfflineSave(){
for(var i=0;i<document.forms.length;i++){
if(document.forms[i].OfflineSave!=null){
os_usd=os_dg("OfflineSave_Area");
var tbs=document.forms[i].ToolsBarStyle==null?"":document.forms[i].ToolsBarStyle;
os_CreateToolBar(document.forms[i],tbs);
os_GetOfflineSaveList(document.forms[i].id);
var cmd=document.forms[i].onsubmit==null?"":document.forms[i].onsubmit;
if(cmd!=""){
cmd=document.forms[i].onsubmit+"";
cmd=cmd.split("{")[1].split("}")[0].replace("\n","");
}
cmd=escape(cmd);
eval("document.forms[i].onsubmit=function(){return os_CheckSubmit(""+document.forms[i].id+"",""+cmd+"");}");
break;
}
}
}
function os_CreateToolBar(obj,boolbarstyle){
var hc;
hc="<div id="os_"+obj.id+"_div"><select id="os_"+obj.id+"_Select" "+os_SelectCss+">";
hc+="</select>";
hc+=" ";
hc+="<input type=button "+os_ButtonCss+" value=载入 onclick=\"os_LoadData(""+obj.id+"");\">";
hc+=" ";
hc+="<input type=button "+os_ButtonCss+" value=删除 onclick=\"os_DelData(""+obj.id+"");\">";
hc+=" ";
hc+="<input type=button "+os_ButtonCss+" value=离线保存 onclick=\"os_SaveData(""+obj.id+"");\"></div>";
obj.innerHTML=hc+obj.innerHTML;
if(boolbarstyle==""){
os_dg("os_"+obj.id+"_div").style.textAlign = "left";
os_dg("os_"+obj.id+"_div").style.textvAlign = "middle";
os_dg("os_"+obj.id+"_div").style.paddingTop = "3";
os_dg("os_"+obj.id+"_div").style.height = "30";
os_dg("os_"+obj.id+"_div").style.border = "1 solid black";
os_dg("os_"+obj.id+"_div").style.paddingLeft = "5";
}
else
os_dg("os_"+obj.id+"_div").className=boolbarstyle;
}
function os_CheckSubmit(id,subfunc){
if(!os_CanSubmit(os_dg(id).action)){
if(confirm("离线保存提示:\n\n您要提交的服务器连接可能出现问题,是否进行离线保存?")){
os_SaveData(id);
}
return false;
}
eval(unescape(subfunc));
}
function os_LoadData(id){
var v=os_dg("os_"+id+"_Select").selectedIndex;
if(v==0) return;
var ud=os_str+id+os_dg(id).length;
if(confirm(os_LoadProStr+"\n\n记录名称:"+os_getUserData(ud,"f_"+v+"_os_savename")+"\n保存时间:"+os_getUserData(ud,"f_"+v+"_os_savedate"))){
var lcount=os_dg(id).length;
for(var i=0;i<lcount;i++){
if(os_dg(id).item(i).type!="submit"&&os_dg(id).item(i).type!="reset"&&os_dg(id).item(i).type!="button"&&os_dg(id).item(i).id!="os_"+id+"_Select"){
if(os_dg(id).item(i).type=="radio"||os_dg(id).item(i).type=="checkbox")
os_dg(os_dg(id).item(i).id).checked=os_getUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id)=="1"?true:false;
else{
if(os_dg(id).item(i).type=="select-multiple"){
var sm=os_getUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id).split(",");
var x;
for(x=0;x<os_dg(id).item(i).length;x++)
os_dg(id).item(i).options[x].selected=false;
for(x=0;x<sm.length-1;x++)
os_dg(id).item(i).options[parseInt(sm[x])].selected=true;
}
else{
if(os_dg(id).item(i).type=="select-one")
os_dg(os_dg(id).item(i).id).selectedIndex=parseInt(os_getUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id));
else{
//alert(os_getUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id));
os_dg(os_dg(id).item(i).id).value=unescape(os_getUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id));
}
}
}
}
}
}
}
function os_DelData(id){
var v=os_dg("os_"+id+"_Select").selectedIndex;
if(v==0) return;
var ud=os_str+id+os_dg(id).length;
if(confirm(os_DelProStr+"\n\n记录名称:"+os_getUserData(ud,"f_"+v+"_os_savename")+"\n保存时间:"+os_getUserData(ud,"f_"+v+"_os_savedate"))){
var i=0;
var ud=os_str+id+os_dg(id).length;
var lcount=parseInt(os_getUserData(ud,"count"));
var vcount=os_dg(id).length;
for(i=0;i<vcount;i++){
if(os_dg(id).item(i).type!="button"&&os_dg(id).item(i).id!="os_"+id+"_Select")
if(v<lcount)
os_putUserData(ud,"f_"+v+"_"+os_dg(id).item(i).id,os_getUserData(ud,"f_"+lcount+"_"+os_dg(id).item(i).id));
os_remUserData(ud,"f_"+lcount+"_"+os_dg(id).item(i).id);
}
if(v<lcount){
os_putUserData(ud,"f_"+v+"_os_savename",os_getUserData(ud,"f_"+lcount+"_os_savename"));
os_putUserData(ud,"f_"+v+"_os_savedate",os_getUserData(ud,"f_"+lcount+"_os_savedate"));
}
os_remUserData(ud,"f_"+lcount+"_os_savename");
os_remUserData(ud,"f_"+lcount+"_os_savedate");
eval("os_putUserData(ud,\"count\",\""+(lcount-1)+"\");");
var s=os_dg("os_"+id+"_Select");
if(lcount==1){
os_delUserData(ud);
while (s.length>0) s.remove(0);
s.add(new Option("无数据",0));
}
else{
s.item(0).text="共有"+(lcount-1)+"个记录";
if(v<s.length){
s.item(0).value=0;
s.item(v).text=s.item(s.length-1).text;
}
s.remove(s.length-1);
}
alert(os_DelSuccessStr);
}
}
function os_SaveData(id){
if(os_dg(id).length<=0){
alert("[OfflineSave]Error:\n\n"+id+" no Element!(input,radio,checkbox,select)");
return;
}
var sd=new Date();
var sn=prompt(os_SaveProStr,sd.toLocaleString()+":MyData");
var ud=os_str+id+os_dg(id).length;
var lcount=os_getUserData(ud,"count");
lcount=lcount==""||lcount==null?1:parseInt(lcount)+1;
if(os_dg(id).length*10*2*lcount>64000){
alert(os_CannotSaveStr);
return;
}
try{
sn=sn==""?sd.toLocaleString():sn;
var vcount=os_dg(id).length;
for(var i=0;i<vcount;i++){
if(os_dg(id).item(i).type!="submit"&&os_dg(id).item(i).type!="reset"&&os_dg(id).item(i).type!="button"&&os_dg(id).item(i).id!="os_"+id+"_Select"){
if(os_dg(id).item(i).type=="radio"||os_dg(id).item(i).type=="checkbox"){
eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_"+os_dg(id).item(i).id+"\",\""+(os_dg(id).item(i).checked?"1":"0")+"\");");
}
else{
if(os_dg(id).item(i).type=="select-multiple"){
var mc="";
for(var x=0;x<os_dg(id).item(i).length;x++){
if(os_dg(id).item(i).options[x].selected) mc+=x+",";
}
eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_"+os_dg(id).item(i).id+"\",\""+mc+"\");");
}
else{
if(os_dg(id).item(i).type=="select-one")
eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_"+os_dg(id).item(i).id+"\",\""+os_dg(id).item(i).selectedIndex+"\");");
else
eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_"+os_dg(id).item(i).id+"\",\""+escape(os_dg(id).item(i).value)+"\");");
}
}
}
}
eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_os_savename\",\""+sn+"\");");
eval("os_putUserData(\""+ud+"\",\"f_"+lcount+"_os_savedate\",\""+sd.toLocaleString()+"\");");
eval("os_putUserData(ud,\"count\",\""+lcount+"\");");//save list count
var s=os_dg("os_"+id+"_Select");
s.item(0).text="共有"+lcount+"个记录";
s.item(0).value=0;
s.add(new Option(sn,lcount));
alert(os_SaveSuccessStr);
}
catch(e){
alert(os_CannotSaveStr+"\n\n错误原因:"+e);
}
}
function os_GetOfflineSaveList(id){
var ud=os_str+id+os_dg(id).length;
var s=os_dg("os_"+id+"_Select");
var lcount=os_getUserData(ud,"count");
var sv="";
while (s.length>0) s.remove(0);
lcount=lcount==""||lcount==null?0:parseInt(lcount);
if(lcount<=0)
s.add(new Option("无数据","0"));
else{
s.add(new Option("共有"+lcount+"个记录","0"));
for(var i=1;i<=lcount;i++){
eval("sv=os_getUserData(ud,\"f_"+i+"_os_savename\");");
s.add(new Option(sv,i));
}
}
}
function os_putUserData(sUDName,sName,sVal) {
os_usd.load(sUDName);
os_usd.expires = os_expires;
os_usd.setAttribute(sName,sVal);
os_usd.save(sUDName);
return;
}
function os_remUserData(sUDName,sName) {
os_usd.load(sUDName);
os_usd.removeAttribute(sName);
os_usd.save(sUDName);
return;
}
function os_getUserData(sUDName,sName) {
os_usd.load(sUDName);
return os_usd.getAttribute(sName);
}
function os_delUserData(sUDName){
var oTimeNow = new Date(); // Start Time
oTimeNow.setMinutes(oTimeNow.getMinutes()+1);
var sExpirationDate = oTimeNow.toUTCString();
os_usd.load(sUDName);
os_usd.expires = sExpirationDate;
os_usd.save(sUDName);
return;
}
function os_CanSubmit(url){
var xmlHTTP = window.ActiveXObject? new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();
xmlHTTP.open("get",url,false);
xmlHTTP.send("");
return xmlHTTP.status=="200";
}
OfflineSave.htm
<html>
<head>
<title>离线保存</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<STYLE> .userData {behavior:url(#default#userdata);}
</STYLE>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<INPUT type="text" class="userData" id="OfflineSave_Area" style="DISPLAY:none">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="FONT-SIZE:12px">
<tr>
<td height="78" colspan="3" valign="top"><font size="4" color="red">Ajax演示程序(J2EE)</font>
<BR>
<BR>
服务端:<b>JDK1.4 TomCAT4.1 Hibernate3 MSSQL Server2000(SP4) DWR1.0</b><BR>
客户端:<b>JavaScript(CallBack) VML </b>
<BR>
编写人:富深协通常州研发中心 姜泉</td>
</tr>
<tr>
<td colspan="3"><BR>
<table border="1" class="listView" width="100%">
<Caption>
离线数据保存(仅限IE浏览器5.0版本以上)</Caption>
<tbody>
<tr>
<td><form id="myOfflineSaveForm" action="J2EE_AJAX.html" onsubmit="alert("这是在HTML页面中的onsubmit事件中执行的函数!");" OfflineSave>
<table cellSpacing="0" cellPadding="2" width="100%" border="1">
<TR>
<TD>名称<input type="text" id="name" size="5">
</TD>
<TD>公司全称<TEXTAREA id="gsqc" name="gsqc" rows="2" cols="20">
</TEXTAREA></TD>
<TD>客户代码<INPUT id="dm" type="checkbox" name="dm"></TD>
</TR>
<tr>
<TD>分类<SELECT id="fl" name="fl">
<OPTION selected>中国人</OPTION>
<OPTION>外星人</OPTION>
<OPTION>山西人</OPTION>
</SELECT></TD>
<TD>性别<INPUT id="cz" type="radio" value="cz" checked name="RadioGroup">男<INPUT id="cz1" type="radio" value="cz1" name="RadioGroup">女</TD>
<TD>增加日期<SELECT id="rq" size="4" name="rq" multiple>
<OPTION>2000年</OPTION>
<OPTION>2003年</OPTION>
<OPTION>2004年</OPTION>
<OPTION>2005年</OPTION>
</SELECT></TD>
</tr>
</table><input type=submit value=submit >
</form>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<script src="OfflineSave.js"></script>
</body>
</html>
相关文章
- 经典游戏—贪吃蛇从C++代码实现[通俗易懂]
- 安卓ExpandableListView的详细使用教程(附代码解析过程)
- <C语言>如何使用C语言代码打印“心形”图案?
- VSCode 使用教程-8.设置代码自动保存
- 零代码差异表达分析工具:GEO2R
- 湖仓一体电商项目(十八):业务实现之编写写入DWD层业务代码
- 2022-10-17-读完《代码整洁之道》
- python中使用马尔可夫决策过程(MDP)动态编程来解决最短路径强化学习问题|附代码数据
- R语言使用ARIMAX预测失业率经济时间序列数据|附代码数据
- 第38篇:Checkmarx代码审计/代码检测工具的使用教程(1)
- 【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
- Redis不同数据类型使用场景代码实例
- Java在不同线程中运行代码详解编程语言
- JS代码如何嵌入到网页中
- 数据库使用C语言访问Oracle数据库,轻松搞定(c代码访问oracle)
- 如何使用C语言连接Oracle数据库(c 代码链接oracle)
- 使用Redis编码实现良好的优化性能(使用redis代码)
- 使用Oracle灵活存放代码的工具(oracle代码存放工具)
- 把textarea中字符串里含有的回车换行替换成<br>的javascript代码
- 微软发布的DataAccessApplicationBlock的使用代码
- 在IIS中改变ASP.NET程序版本的实现方法附批处理代码
- 在SQL中使用convert函数进行日期的查询的代码
- 比较全的PHP会话(session时间设定)使用入门代码
- 在asp.NET中使用SMTP发送邮件的实现代码
- 从ASP.NET得到MicrosoftWord文档的代码
- jquery获得下拉框值的代码
- Datalist控件使用存储过程来分页实现代码
- 限制CheckBoxList控件只能单选实现代码及演示动画
- Android学习笔记--使用剪切板在Activity中传值示例代码
- javascript创建createXmlHttpRequest对象示例代码
- python使用正则搜索字符串或文件中的浮点数代码实例
- 使用SNK密钥文件保护你的DLL和代码不被反编译教程