首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 23, 2007

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
不用MOUSEMOVE也能滑动啊
May 23 #Javascript
一个用js实现的页内搜索代码
May 23 #Javascript
一个js实现的所谓的滑动门
May 23 #Javascript
JavaScript网页制作特殊效果用随机数
May 22 #Javascript
JS加ASP二级域名转向的代码
May 17 #Javascript
用javascript实现的支持lrc歌词的播放器
May 17 #Javascript
JavaScript中的new的使用方法与注意事项
May 16 #Javascript
访问日志(2) 逆序(1) yolo3(1) 进程假死(1) 线程(1) 连接数(1) UV(1) PV(1) jenkins(1) 字符串(2)
You might like
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP 转义使用详解
2013/07/15 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
Python中的列表知识点汇总
2015/04/14 Python
Pycharm学习教程（2） 代码风格
2017/05/02 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python isinstance函数用法详解
2020/02/13 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
浅析NumPy 切片和索引
2020/09/02 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
韩国江南富人区高端时尚百货商场：Galleria（格乐丽雅）
2018/03/27 全球购物
Harrods美国：英国最大的百货公司
2018/11/04 全球购物
应用英语专业自荐信
2014/01/26 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
golang中的空接口使用详解
2021/03/30 Python
Python如何让字典保持有序排列
2022/04/29 Python