管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

OfflineSave离线保存代码再次发布使用说明

　　必知：所有需要处理的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

　　

复制代码 代码如下:

　　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>

　　离线数据保存(仅限ＩＥ浏览器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>

教程首页 更多教程