OfflineSave offline saving code re-release instructions_javascript skills

Must know: All HTML elements that need to be processed must have ID attributes. The component will only detect the ID attribute of the element

1. Add


2. Add
style="display:none">

3. Add


4. Add the extended attribute OfflineSave
to the form tag. Example:

ToolsBarStyle is a css class attribute, and the container is a div, including select, input, button

Note:
Case 1:

In this case, the component can automatically detect the server survival status. If the server cannot be connected, it will prompt local saving,
and the docheck function can also work normally.

Case 2:

In this case, the component cannot intercept the submission event, nor can it automatically detect the server survival status

Suggestion: When detecting the data in the form, Write the detection function in the form tag onsubmit event

Contact me: qq:13872888 Note: blueidea

Copy code The code is as follows:

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        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="

";
    hc+="";
    hc+=" ";
    hc+="";
    hc+=" ";
    hc+="";
    hc+="  ";
    hc+="

";
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("Offline saving prompt: nnyou There may be a problem with the server connection to be submitted. Do you want to save it offline?")){
          os_SaveData(id); ; 
}

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 "nnrecord name:" os_getUserData(ud,"f_" v "_os_savename") "nsave time:" os_getUserData( ud,"f_" v "_os_savedate"))){
var lcount=os_dg(id).length;
for(var i=0;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(","); item(i).length;x )
os_dg(id).item(i).options[x].selected=false;
for(x=0;x                                                                                                                                                                            
                    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 "nn记录名称:" 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            if(os_dg(id).item(i).type!="button"&&os_dg(id).item(i).id!="os_" id "_Select")
                if(v                    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            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.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        alert("[OfflineSave]Error:nn" 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        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                        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 "nn错误原因:" 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        s.add(new Option("无数据","0"));
    else{
        s.add(new Option("共有" lcount "个记录","0"));
        for(var i=1;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

复制代码 代码如下:

    
        
        
        
        
    
    
        
        
            
                
            
            
                
            
        

Ajax演示程序(J2EE)
                    

                    

                    服务端:JDK1.4 TomCAT4.1 Hibernate3 MSSQL Server2000(SP4) DWR1.0

                    客户端:JavaScript(CallBack) VML 
                    

                    编写人:富深协通常州研发中心 姜泉

                    
                        
                        
                            
                                
                            
                        
                    

                                        
                                            
                                                
                                                
                                                
                                            
                                            
                                                
                                                
                                                
                                            
                                        

名称	公司全称 <br>	客户代码
分类                                                         中国人                                                         外星人                                                         山西人	性别男女	增加日期                                                         2000年                                                         2003年                                                         2004年                                                         2005年

                                    

                                

                

        <script></script>