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> 
                            离线数据保存(仅限IE浏览器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>
Javascript 相关文章推荐
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
js图片预加载示例
Apr 30 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
处理canvas绘制图片模糊问题
May 11 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
You might like
PHP生成UTF8文件的方法
2010/05/15 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
js查找节点的方法小结
2015/01/13 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python实现的选择排序算法示例
2017/11/29 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
python用requests实现http请求代码实例
2019/10/31 Python
pytorch 常用线性函数详解
2020/01/15 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
护士毕业生自我鉴定
2014/02/08 职场文书
公司感谢信范文
2015/01/22 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
Go 语言中 20 个占位符的整理
2021/10/16 Golang