移动端使用localStorage缓存射流研究…和钢性铸铁文的方法（网络开发)

将jquery和公共样式缓存到localStorage，可以减少超文本传送协议(超文本传输协议的缩写)请求，从而优化页面加载时间，下面的代码可以实现此功能：

脚本类型='text/javascript' //入口函数if(窗口。本地存储){ initJs()；initCss('css '，'/gfdzp 201508257998/转盘/Style/CSS _ whul。CSS ')；} else { addFile '/gfdzp 201508257998/转盘/Script/jquery-1.8.3.min.js '，' js ')；addFile('/gfdzp 201508257998/returnal/Script/whur。返回。js '，' js ')；addFile('/gfdzp 201508257998/转盘/Style/CSS _ whur。CSS '，' CSS ')；} //第一步：加载页面js:先加载jQuery后加载用户脚本函数initJs(){ var name=' jquery '；var URL='/gfdzp 201508257998/转盘/Script/jquery-1。8 .3 .量滴js '；var xhr js=window . local storage？localStorage.getItem(名称):"";if(js==null | | js。长度==0){ if(window .ActiveX对象){ xhr=新的ActiveX对象(' Microsoft .XMLHTTP’)；} else if(窗口. XMLHttpRequest){ xhr=new XMLHttpRequest()；} xhr.open('GET '，URL)；xhr。发送(null)；xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){ js=xhr。responsetextlocalStorage.setItem(名称，js)；js=js==null？ jsaddTxt(js，‘js’)；初始化转盘();//确保先引用Jquery } }} else { addTxt(js，' js ')；初始化转盘();} } //加载自定义脚本函数初始化转盘(){ var name='转盘；var URL='/gfdzp 201508257998/returnl/Script/whul。返回。js '；var xhr js=window . local storage？localStorage.getItem(名称):"";if(js==null | | js。长度==0){ if(window .ActiveX对象){ xhr=新的ActiveX对象(' Microsoft .XMLHTTP’)；} else if(窗口. XMLHttpRequest){ xhr=new XMLHttpRequest()；} xhr.open('GET '，URL)；xhr。发送(null)；xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){ js=xhr。responsetextlocalStorage.setItem(名称，js)；js=js==null？ jsaddTxt(js，‘js’)；} };} else { addTxt(js，' js ')；} } //第二步：初始化钢性铸铁函数initCss(名称，URL){ var xhr；var css=window.localStorage？localStorage.getItem(名称):"";if(CSS==null | | CSS。长度==0){ if(window .ActiveX对象){ xhr=新的ActiveX对象(' Microsoft .XMLHTTP’)；} else if(窗口. XMLHttpRequest){ xhr=new XMLHttpRequest()；} xhr.open('GET '，URL)；xhr。发送(null)；xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){ CSS=xhr。responsetextlocalStorage.setItem(名称，CSS)；css=css==null？' ' : CSS=CSS . replace(/images \//g，' style/images/')；addTxt(css，‘CSS’)；} };} else { CSS=CSS。替换(/images \//g，' style/images/')；addTxt(css，‘CSS’)；} } //辅助方法1:动态添加js，css文件引用函数addFile(url，fileType){ var HEAD=document。getelementsbytagname(' HEAD ').项目(0);定义变量链接；if(FileType==' js '){ link=document。CreateElement('脚本')；链接。type=' text/JavaScript '；link . src=URL } else { link=document。创建元素(“链接”)；链接。type=' text/CSS '；link.rel='样式表；link.rev='样式表；link . media=' screenlink . href=URL } head . appendchild(链接);} //辅助方法2:动态添加js，css文件内容函数addTxt(文本，文件类型){ var HEAD=document。getelementsbytagname(' HEAD ').项目(0);定义变量链接；if(FileType==' js '){ link=document。CreateElement('脚本')；链接。type=' text/JavaScript '；link . innerhtml=text } else { link=document。创建元素(“样式”)；链接。type=' text/CSS '；link . innerhtml=text } head . appendchild(链接);}/脚本查看写入记录：

封装成射流研究…插件：

/** * 插件功能：使用localStorage缓存射流研究…和钢性铸铁文件，减少超文本传送协议(超文本传输协议的缩写)请求和页面渲染时间，适用于网移动端H5页面制作。 * 插件作者：[emailprotected] *使用方法： * 1.使用此插件前，需要给插件的页面版本变量赋值，建议变量值由服务器后端输出，当需要更新客户端资源时，修改版本值即可。 * 2.加载Js:由于射流研究…加载有顺序要求，所以需要将后加载的脚本作为前一个脚本的回调参数传入，如：* whul。RES . Loadjs(' jquery '，' %=基本路径% Latter/Script/jquery-1。8 .3 .量滴js '，* function(){ * whul。负荷曲线('拨浪鼓'，'脚本/whul。格格。js '，null)；* });* 3.加载css，如：whul。RES . LoadCSS(' CSS '，'/Style/CSS _ whul。CSS '，空值)；*/var whar=窗口。whar | | { }；哇哦。RES={页面版本： ' '，//页面版本，由页面输出，用于刷新localStorage缓存//动态加载射流研究…文件并缓存loadJs:函数（名称、网址、回调){ if(window。本地存储){ var xhrvar js=localStorage.getItem(名称);if(js==null | | js。长度==0 | |这个。页面版本！=LocalStorage。GetItem(' version '){ if(window .ActiveX对象){ xhr=新的ActiveX对象(' Microsoft .XMLHTTP’)；} else if(窗口. XMLHttpRequest){ xhr=new XMLHttpRequest()；} if (xhr！=null) { xhr.open('GET '，URL)；xhr。发送(null)；xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){ js=xhr。responsetextlocalStorage.setItem(名称，js)；localStorage.setItem('version '，whur。RES . page版本)；js=js==null？ jswhul。RES . Writejs(js)；如果(回调！=null){ callback()；//回调，执行下一个引用} } };} } else { whul。RES . Writejs(js)；如果(回调！=null){ callback()；//回调，执行下一个引用} } } else { whul。RES . Linkjs(网址)；} }，loadCss:函数（名称，URL){ if(窗口。local storage){ var xhr；var css=localStorage.getItem(名称);if(CSS==null | | CSS。长度==0 | |这个。页面版本！=LocalStorage。GetItem(' version '){ if(window .ActiveX对象){ xhr=新的ActiveX对象(' Microsoft .XMLHTTP’)；} else if(窗口. XMLHttpRequest){ xhr=new XMLHttpRequest()；} if (xhr！=null) { xhr.open('GET '，URL)；xhr。发送(null)；xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){ CSS=xhr。responsetextlocalStorage.setItem(名称，CSS)；localStorage.setItem('version '，whur。RES . page版本)；css=css==null？ CSS=CSS . replace(/images \//g，' style/images/')；//css里的图片路径需单独处理whol。RES . write CSS(CSS)；} };} } else { CSS=CSS。替换(/images \//g，' style/images/')；//css里的图片路径需单独处理whol。RES . write CSS(CSS)；} } else { whul。链接；} }, //往页面写入射流研究…脚本writeJs:函数（文本){ var HEAD=文档。getelementsbytagname(' HEAD ').项目(0);var link=文档。创建元素(“脚本”)；链接。type=' text/JavaScript '；link . innerhtml=text head . appendchild(链接);}, //往页面写入钢性铸铁样式writeCss:函数（文本){ var HEAD=文档。getelementsbytagname(' HEAD ').项目(0);var link=文档。创建元素(“样式”)；链接。type=' text/CSS '；link . innerhtml=text head . appendchild(链接);}, //往页面引入射流研究…脚本linkJs:函数(网址){ var HEAD=文档。getelementsbytagname(' HEAD ').项目(0);var link=文档。创建元素(“脚本”)；链接。type=' text/JavaScript '；link.src=urlhead.appendChild(链接);}, //往页面引入钢性铸铁样式linkCss:函数(网址){ var HEAD=文档。getelementsbytagname(' HEAD ').项目(0);var link=文档。创建元素(“链接”)；链接。type=' text/CSS '；link.rel='样式表；link.rev='样式表；link . media=' screenlink . href=URL head . appendchild(链接);} }调用该插件：

脚本类型='text/javascript' //entry函数whol . RES . page version=' 1002 '；//页面版本，用于检查缓存是否为whul . RES . load js(' jquery '，'/gfdzp 201508257998/转盘/script/jquery-1.8.3.min.js '，function(){ whul . RES . load js('转盘')'/gfdzp 201508257998/转盘/Script/whul .转盘. js '，null)；});whul . RES . load CSS(' CSS '，'/gfdzp 201508257998/转盘/Style/CSS _ whul . CSS '，null)；/script以上就是边肖向大家介绍的移动终端使用localStorage缓存Js和css的方法(web开发)。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！