首页
所有分类
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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）
Nov 09 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
Postman无法正常返回结果问题解决
Aug 28 Javascript
不用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
切片(1) Slice(1) Qlabel(1) pyqt5(3) DFA(1) css3 (2) linux(15) pycharm(6) pygame(3) MapReduce(1)
You might like
海贼王动画变成“真人”后，凯多神还原，雷利太帅了！
2020/04/09 日漫
加强版phplib的DB类
2008/03/31 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
nodejs基础知识
2017/02/03 NodeJs
vue使用vue-cli快速创建工程
2017/07/28 Javascript
客户端（vue框架）与服务器（koa框架）通信及服务器跨域配置详解
2017/08/26 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
python求列表交集的方法汇总
2014/11/10 Python
Python探索之创建二叉树
2017/10/25 Python
Python3解释器知识点总结
2019/02/19 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
英国第一豪华护肤品牌：Elemis
2017/10/12 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
高中的自我鉴定
2013/12/16 职场文书
书香校园建设方案
2014/05/02 职场文书
经典团队口号
2014/06/06 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
出生证明范本
2015/06/15 职场文书
朋友离别感言
2015/08/04 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python