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

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

时间： 2024-11-10 00:35:05

OfflineSave离线保存代码再次发布使用说明_javascript技巧的相关文章

JS中使用变量保存arguments对象的方法_javascript技巧

迭代器(iterator)是一个可以顺序存取数据集合的对象.其一个典型的API是next方法.该方法获得序列中的下一个值. 迭代器示例 题目:希望编写一个便利的函数,它可以接收任意数量的参数,并为这些值建立一个迭代器. 测试代码好下: var it=values(,,,,,,,,); it.next();// it.next();// it.next();// 分析:由于values函数需要接收任意多个参数,这里就需要用到上一节讲到的构建可变参数的函数的方法.然后里面的迭代器对象来遍历argum

深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点_javascript技巧

具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以帮助你写出更好的,更易于理解和维护的代码,这些代码在几个月或是几年之后再回过头看看也是会觉得很自豪的. 书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且

JS 加入收藏夹的代码(主流浏览器通用)_javascript技巧

所有浏览器通用的js添加收藏夹代码 复制代码 代码如下: <script> function addfavorite() { if (document.all) { window.external.addFavorite('http://www.XXX.com','XXX'); } else if (window.sidebar) { window.sidebar.addPanel('XXX', 'http://www.XXX.com', ""); } } </scr

JS实现星星评分功能实例代码(两种方法)_javascript技巧

一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no

拖动布局之保存布局页面cookies篇_javascript技巧

我实现的方法是记录每列拥有的拖动对象,这样在初始或刷新的时候读取这列有哪些拖动对象,直接把拖动对象通过appenChild加进去就可以了,比如拖动后列的id为col2,在这一列的拖动对象的id为col1_2,col3_1,col2_1,我就把col2=col1_2|col3_1|col2_1记录下来,在刷新页面的时候就读取col2的值,循环通过document.getElementById(col2).appendChild(document.getElementById(col1_2))实现显

用JS实现图片轮播效果代码（一）_javascript技巧

一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content"> <!-- 总的父

使用JSLint提高JS代码质量方法分享_javascript技巧

随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠"复制 / 粘贴"常用脚本完成简单前端任务的模式.JavaScript 语言本身是一种弱类型脚本语言,具有相对于 C++ 或 Java 语言更为松散的限制,一切以函数为中心的函数式编程思想也为开发人员提供了更加灵活的语法实现.然而,这种灵活性在带来高效的同时,也成为初学或者经验不足的 JavaScript 开发人员的噩梦.形式各异的代码风格.隐含错误的代码行为,严重影响

Javascript笔记一 js以及json基础使用说明_javascript技巧

JavaScript中的代码只体现为一种形式,就是function. 注意:以上单词都是小写的,不要和Number, String, Object, Function等JavaScript内置函数混淆,JavaScript语言是区分大小写. typeof(null)返回object,但null并非object. JavaScript的代码就只有function一种形式,function就是函数的类型.函数的写法有"定义式"和"变量式". 定义式的函数语句会优先执行.

js复制内容到剪贴板代码,js复制代码的简单实例_javascript技巧

如下所示: <script type="text/JavaScript"> function jsCopy(){ var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </script> <textarea id="conte