首页
所有分类
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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery学习笔记之 Ajax操作篇（二） - 数据传递
Jun 23 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
解决ionic和angular上拉加载的问题
Aug 03 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
vue实现多级菜单效果
Oct 19 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) 双人对弈(1) tcp/ip(1) 限流(2) 限速(1) 递归(1) IP(1) 后端(1) Parser(1) tokenizer(1)
You might like
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
PHP教程 基本语法
2009/10/23 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
隐性调用php程序的方法
2015/06/13 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
javascript 定义新对象方法
2010/02/20 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
javascript运动详解
2015/07/06 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
python友情链接检查方法
2015/07/08 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
详解Python3注释知识点
2019/02/19 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
英国医生在线预约：Top Doctors
2019/10/30 全球购物
台湾良兴购物网：EcLife
2019/12/01 全球购物
创业资金计划书
2014/02/06 职场文书
离婚答辩状范文
2015/05/22 职场文书