OfflineSave离线保存代码再次发布使用说明
2018-09-24 21:41
必知：所有需要处理的HTML元素必须具有ID属性，组件只会探测元素的ID属性
1.在</Head>上加入
<STYLE>
</STYLE>
2.在<body>下加入
<INPUTtype=textclass=userDataid=OfflineSave_Areastyle=display:none>
3.在</body>上加入
<scriptsrc=OfflineSave.js></script>
4.为form标签加入扩展属性OfflineSave
例：<formid=myOfflineSaveFormOfflineSaveToolsBarStyle=mycssclass>
ToolsBarStyle为cssclass属性，容器为div,包含select,input,button
注意：
情况1：
<formid=myformonsubmit=docheck(this)>
<inputtype=textid=mytext>
<inputtype=submitvalue=submit>
</form>
在这种情况下,组件可以自动探测服务器存活状态，如服务器无法连接时，会提示本地保存,
并且docheck函数也可以正常工作
情况2：
<formid=myform>
<inputtype=textid=mytext>
<inputtype=buttonvalue=submitonclick=myform.submit()>
</form>
在这种情况下,组件无法截获提交事件，也无法自动探测服务器存活状态
建议：检测表单内数据时，在form标签onsubmit事件内写入检测函数
联系我：qq:13872888注明：blueidea
复制代码 代码如下:
varos_Obj,os_usd;
varos_dg=document.getElementById;
varos_ButtonCss=style=\cursor:hand;height:20px;padding:0px3px;border:1pxsolid#67C1E4;\;
varos_SelectCss=style=\font-size:12px;\;
varos_SaveSuccessStr=离线数据保存成功!;
varos_SaveProStr=请输入离线保存的名称:(如为空则用当前时间表示);
varos_LoadProStr=确认要载入离线数据吗?;
varos_DelProStr=确认要删除离线数据吗?;
varos_DelSuccessStr=离线数据删除成功!;
varos_oUD=OfflineSave_oPersistInput;
varos_DefaultFiledLength=10;//DefaultFiledlength
varos_str=OfflineSave_;
varos_CannotSaveStr=保存数据时出现错误![离线保存空间仅限640K]\n\n有可能已超出离线保存容量!请删除部分数据后再保存!;
varos_expires=(newDate(2010,1,1)).toUTCString();
InitOfflineSave();
functionInitOfflineSave(){
for(vari=0;i<document.forms.length;i++){
if(document.forms[i].OfflineSave!=null){
os_usd=os_dg(OfflineSave_Area);
vartbs=document.forms[i].ToolsBarStyle==null?:document.forms[i].ToolsBarStyle;
os_CreateToolBar(document.forms[i],tbs);
os_GetOfflineSaveList(document.forms[i].id);
varcmd=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(){returnos_CheckSubmit(+document.forms[i].id+,+cmd+);});
break;
}
}
}
functionos_CreateToolBar(obj,boolbarstyle){
varhc;
hc=<divid=os_+obj.id+_div><selectid=os_+obj.id+_Select+os_SelectCss+>;
hc+=</select>;
hc+=;
hc+=<inputtype=button+os_ButtonCss+value=载入onclick=\os_LoadData(+obj.id+);\>;
hc+=;
hc+=<inputtype=button+os_ButtonCss+value=删除onclick=\os_DelData(+obj.id+);\>;
hc+=;
hc+=<inputtype=button+os_ButtonCss+value=离线保存onclick=\os_SaveData(+obj.id+);\></div>;
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=1solidblack;
os_dg(os_+obj.id+_div).style.paddingLeft=5;
}
else
os_dg(os_+obj.id+_div).className=boolbarstyle;
}
functionos_CheckSubmit(id,subfunc){
if(!os_CanSubmit(os_dg(id).action)){
if(confirm(离线保存提示:\n\n您要提交的服务器连接可能出现问题,是否进行离线保存?)){
os_SaveData(id);
}
returnfalse;
}
eval(unescape(subfunc));
}
functionos_LoadData(id){
varv=os_dg(os_+id+_Select).selectedIndex;
if(v==0)return;
varud=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))){
varlcount=os_dg(id).length;
for(vari=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==radioos_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){
varsm=os_getUserData(ud,f_+v+_+os_dg(id).item(i).id).split(,);
varx;
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));
}
}
}
}
}
}
}
functionos_DelData(id){
varv=os_dg(os_+id+_Select).selectedIndex;
if(v==0)return;
varud=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))){
vari=0;
varud=os_str+id+os_dg(id).length;
varlcount=parseInt(os_getUserData(ud,count));
varvcount=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)+\););
vars=os_dg(os_+id+_Select);
if(lcount==1){
os_delUserData(ud);
while(s.length>0)s.remove(0);
s.add(newOption(无数据,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);
}
}
functionos_SaveData(id){
if(os_dg(id).length<=0){
alert([OfflineSave]Error:\n\n+id+noElement!(input,radio,checkbox,select));
return;
}
varsd=newDate();
varsn=prompt(os_SaveProStr,sd.toLocaleString()+:MyData);
varud=os_str+id+os_dg(id).length;
varlcount=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;
varvcount=os_dg(id).length;
for(vari=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==radioos_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){
varmc=;
for(varx=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+\););//savelistcount
vars=os_dg(os_+id+_Select);
s.item(0).text=共有+lcount+个记录;
s.item(0).value=0;
s.add(newOption(sn,lcount));
alert(os_SaveSuccessStr);
}
catch(e){
alert(os_CannotSaveStr+\n\n错误原因:+e);
}
}
functionos_GetOfflineSaveList(id){
varud=os_str+id+os_dg(id).length;
vars=os_dg(os_+id+_Select);
varlcount=os_getUserData(ud,count);
varsv=;
while(s.length>0)s.remove(0);
lcount=lcount==lcount==null?0:parseInt(lcount);
if(lcount<=0)
s.add(newOption(无数据,0));
else{
s.add(newOption(共有+lcount+个记录,0));
for(vari=1;i<=lcount;i++){
eval(sv=os_getUserData(ud,\f_+i+_os_savename\););
s.add(newOption(sv,i));
}
}
}
functionos_putUserData(sUDName,sName,sVal){
os_usd.load(sUDName);
os_usd.expires=os_expires;
os_usd.setAttribute(sName,sVal);
os_usd.save(sUDName);
return;
}
functionos_remUserData(sUDName,sName){
os_usd.load(sUDName);
os_usd.removeAttribute(sName);
os_usd.save(sUDName);
return;
}
functionos_getUserData(sUDName,sName){
os_usd.load(sUDName);
returnos_usd.getAttribute(sName);
}
functionos_delUserData(sUDName){
varoTimeNow=newDate();//StartTime
oTimeNow.setMinutes(oTimeNow.getMinutes()+1);
varsExpirationDate=oTimeNow.toUTCString();
os_usd.load(sUDName);
os_usd.expires=sExpirationDate;
os_usd.save(sUDName);
return;
}
functionos_CanSubmit(url){
varxmlHTTP=window.ActiveXObject?newActiveXObject(Microsoft.XMLHTTP):newXMLHttpRequest();
xmlHTTP.open(get,url,false);
xmlHTTP.send();
returnxmlHTTP.status==200;
}
OfflineSave.htm
复制代码 代码如下:
<html>
<head>
<title>离线保存</title>
<metahttp-equiv=Content-Typecontent=text/html;charset=gb2312>
</STYLE>
<linkhref=css.cssrel=stylesheettype=text/css>
</head>
<body>
<INPUTtype=textclass=userDataid=OfflineSave_Areastyle=DISPLAY:none>
<tablewidth=100%border=0cellpadding=0cellspacing=0style=FONT-SIZE:12px>
<tr>
<tdheight=78colspan=3valign=top><fontsize=4color=red>Ajax演示程序(J2EE)</font>
<BR>
<BR>
服务端:<b>JDK1.4TomCAT4.1Hibernate3MSSQLServer2000(SP4)DWR1.0</b><BR>
客户端:<b>JavaScript(CallBack)VML</b>
<BR>
编写人:富深协通常州研发中心姜泉</td>
</tr>
<tr>
<tdcolspan=3><BR>
<tableborder=1class=listViewwidth=100%>
<Caption>
离线数据保存(仅限ＩＥ浏览器5.0版本以上)</Caption>
<tbody>
<tr>
<td><formid=myOfflineSaveFormaction=J2EE_AJAX.htmlonsubmit=alert(这是在HTML页面中的onsubmit事件中执行的函数!);OfflineSave>
<tablecellSpacing=0cellPadding=2width=100%border=1>
<TR>
<TD>名称<inputtype=textid=namesize=5>
</TD>
<TD>公司全称<TEXTAREAid=gsqcname=gsqcrows=2cols=20>
</TEXTAREA></TD>
<TD>客户代码<INPUTid=dmtype=checkboxname=dm></TD>
</TR>
<tr>
<TD>分类<SELECTid=flname=fl>
<OPTIONselected>中国人</OPTION>
<OPTION>外星人</OPTION>
<OPTION>山西人</OPTION>
</SELECT></TD>
<TD>性别<INPUTid=cztype=radiovalue=czcheckedname=RadioGroup>男<INPUTid=cz1type=radiovalue=cz1name=RadioGroup>女</TD>
<TD>增加日期<SELECTid=rqsize=4name=rqmultiple>
<OPTION>2000年</OPTION>
<OPTION>2003年</OPTION>
<OPTION>2004年</OPTION>
<OPTION>2005年</OPTION>
</SELECT></TD>
</tr>
</table><inputtype=submitvalue=submit>
</form>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<scriptsrc=OfflineSave.js></script>
</body>
</html>
上一篇：AJAX架构之Dojo篇
下一篇：js资料toString 方法