OfflineSave离线保存代码再次发布使用说明_javascript技巧
必知：所有需要处理的HTML元素必须具有ID属性，组件只会探测元素的ID属性
1. 在上加入
2. 在
3. 在上加入
<script></script>
4. 为form标签加入扩展属性OfflineSave
例：
在这种情况下,组件可以自动探测服务器存活状态，如服务器无法连接时，会提示本地保存,
并且docheck函数也可以正常工作
情况2：
在这种情况下,组件无法截获提交事件，也无法自动探测服务器存活状态
建议：检测表单内数据时，在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
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="
";
hc+=" ";
hc+="";
hc+=" ";
hc+="";
hc+=" ";
hc+="
"; hc+=" ";
hc+="";
hc+=" ";
hc+="";
hc+=" ";
hc+="
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
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
for(x=0;x
}
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
if(v
os_remUserData(ud,"f_"+lcount+"_"+os_dg(id).item(i).id);
}
if(v
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.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 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
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
}
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 s.add(new Option("无数据","0"));
else{
s.add(new Option("共有"+lcount+"个记录","0"));
for(var i=1;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
复制代码 代码如下:
|
Ajax演示程序(J2EE) 服务端:JDK1.4 TomCAT4.1 Hibernate3 MSSQL Server2000(SP4) DWR1.0 客户端:JavaScript(CallBack) VML 编写人:富深协通常州研发中心 姜泉 | |
|
<script></script>
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
在JavaScript中替换字符串字符
Mar 11, 2025 am 12:07 AM
JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
jQuery矩阵效果
Mar 10, 2025 am 12:52 AM
将矩阵电影特效带入你的网页！这是一个基于著名电影《黑客帝国》的酷炫jQuery插件。该插件模拟了电影中经典的绿色字符特效，只需选择一张图片，插件就会将其转换为充满数字字符的矩阵风格画面。快来试试吧，非常有趣！ 工作原理 插件将图片加载到画布上，读取像素和颜色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地读取图片的矩形区域，并利用jQuery计算每个区域的平均颜色。然后，使用
立即提高jQuery性能的10种方法
Mar 11, 2025 am 12:15 AM
本文概述了十个简单的步骤，可以显着提高脚本的性能。 这些技术很简单，适用于所有技能水平。 保持更新：使用bundler（例如vite）的npm等软件包经理来确保
用JavaScript增强结构标记
Mar 10, 2025 am 12:18 AM
核心要点 利用 JavaScript 增强结构化标记可以显着提升网页内容的可访问性和可维护性，同时减小文件大小。 JavaScript 可有效地用于为 HTML 元素动态添加功能，例如使用 cite 属性自动在块引用中插入引用链接。 将 JavaScript 与结构化标记集成，可以创建动态用户界面，例如无需页面刷新的选项卡面板。 确保 JavaScript 增强功能不会妨碍网页的基本功能至关重要；即使禁用 JavaScript，页面也应保持功能正常。 可以使用高级 JavaScript 技术（
如何构建简单的jQuery滑块
Mar 11, 2025 am 12:19 AM
本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库，它基于jQuery构建，并提供许多配置选项来设置轮播。 如今，图片轮播已成为网站必备功能——一图胜千言！ 决定使用图片轮播后，下一个问题是如何创建它。首先，您需要收集高质量、高分辨率的图片。 接下来，您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计，因此使用此库构建的轮播可以适应任何
