Required: All HTML elements that need to be processed must have an id attribute, and the component will only probe the id attribute of the element
1. Join in </Head>
<STYLE>
. userData {Behavior:url (#default #userdata);}
</STYLE>
2. Join in <body>
<input type=text class=userdata id=offlinesave_area style= "Display:none" >
3. Join in </body>
<script src=offlinesave.js></script>
4. Add extended Attributes for form label Offlinesave
Example: <form id=myofflinesaveform offlinesave toolsbarstyle= "Mycssclass" >
Toolsbarstyle is a CSS class attribute, the container is a div, contains Select,input,button
Attention:
Situation 1:
<form id=myform onsubmit= "Docheck (This)" >
<input Type=text id=mytext>
<input Type=submit value=submit>
</form>
In this case, the component can automatically detect the server's surviving state, prompting for local saving if the server cannot connect,
And the Docheck function can work properly.
Situation 2:
<form id=myform >
<input Type=text id=mytext>
<input Type=button value=submit onclick= "Myform.submit ()" >
</form>
In this case, the component cannot intercept the commit event or automatically probe the server's surviving state
Recommendation: To detect the data in the form, write the detection function in the form label onsubmit event
Contact me: qq:13872888 Note: Blueidea
Copy Code code as follows:
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= "offline Data save success!";
var os_saveprostr= "Please enter the name of the offline Save: (in the current time, if empty)";
var os_loadprostr= "Confirm to load offline data?";
var os_delprostr= "Confirm that you want to delete offline data?";
var os_delsuccessstr= "offline Data deletion success!";
var os_oud= "Offlinesave_opersistinput";
var os_defaultfiledlength=10;//default Filed length
var os_str= "Offlinesave_";
var os_cannotsavestr= "There was an error saving the data!" [Offline save space is limited to 640k]\n\n may have exceeded the offline save capacity!) Please delete some data and save it! ";
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? "":d ocument.forms[i]. Toolsbarstyle;
Os_createtoolbar (DOCUMENT.FORMS[I],TBS);
Os_getofflinesavelist (document.forms[i].id);
var cmd=document.forms[i].onsubmit==null? "":d ocument.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= load onclick=\" Os_loaddata (' "+obj.id+"); \ ">";
hc+= "";
hc+= "<input Type=button" +os_buttoncss+ "value= Delete onclick=\" Os_deldata (' "+obj.id+"); \ ">";
hc+= "";
hc+= "<input Type=button" +os_buttoncss+ "value= offline Save 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 ("offline save prompt: \ n \ nthe server connection you want to submit may be a problem, is it stored offline?")) {
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 \ nthe record name:" +os_getuserdata (UD, "F_" +v+ "_os_savename") + "\ n Save time:" +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 \ nthe record name:" +os_getuserdata (UD, "F_" +v+ "_os_savename") + "\ n Save time:" +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 ("No Data", 0);
}
else{
S.item (0). text= "Total" + (lcount-1) + "a record";
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= "Altogether" +lcount+ "a record";
S.item (0). value=0;
S.add (New Option (Sn,lcount));
alert (OS_SAVESUCCESSSTR);
}
catch (e) {
Alert (os_cannotsavestr+ "\ n error Reason:" +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 ("No Data", "0"));
else{
S.add ("+lcount+", "0") for new Option ("Total");
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
Copy Code code as follows:
<html>
<head>
<title> Offline Save </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= "colspan=" 3 "valign=" Top "><font size=" 4 "color=" Red ">ajax Demo program (Java ee) </font>
<BR>
<BR>
Service side: <b>jdk1.4 TomCAT4.1 Hibernate3 MSSQL Server2000 (SP4) dwr1.0</b><br>
Client: <b>javascript (CallBack) VML </b>
<BR>
Author: Fu Shen Association General State Research and Development center Jiangquan </td>
</tr>
<tr>
<TD colspan= "3" ><BR>
<table border= "1" class= "ListView" width= "100%" >
<Caption>
Offline data Save (ie Browser version 5.0 only) </Caption>
<tbody>
<tr>
<td><form id= "Myofflinesaveform" action= j2ee_ajax.html "onsubmit=" alert (' This is the function executed in the OnSubmit event in the HTML page! '); " Offlinesave>
<table cellspacing= "0" cellpadding= "2" width= "100%" border= "1" >
<TR>
<TD> name <input type= "text" id= "name" size= "5" >
</TD>
<TD> company full name <textarea id= "GSQC" name= "GSQC" rows= "2" cols= ">"
</TEXTAREA></TD>
<TD> Customer code <input id= "DM" type= "checkbox" Name= "DM" ></TD>
</TR>
<tr>
<TD> classification <select id= "FL" name= "FL" >
<option selected> Chinese </OPTION>
<OPTION> Aliens </OPTION>
<OPTION> Shanxi People </OPTION>
</SELECT></TD>
<TD> gender <input id= "CZ" type= "Radio" value= "CZ" checked name= "Radiogroup" > Male <input id= "CZ1" type= "Radio" Value= "Cz1" name= "Radiogroup" > Women </TD>
<TD> Add date <select id= "RQ" size= "4" name= "RQ" multiple>
<option>2000 year </OPTION>
<option>2003 year </OPTION>
<OPTION>2004 year </OPTION>
<option>2005 year </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>
