手机html缓存js,移动端使用localStorage缓存Js和css文的方法(web开发)

最新推荐文章于 2023-11-28 14:29:27 发布
最新推荐文章于 2023-11-28 14:29:27 发布
阅读量794 收藏
点赞数
文章标签： 手机html缓存js

将jquery和公共样式缓存到localStorage，可以减少Http请求，从而优化页面加载时间，下面的代码可以实现此功能：

//入口函数

if (window.localStorage) {

initJs();

initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css");

} else {

addFile("/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js", "js");

addFile("/gfdzp201508257998/Turntable/Script/whir.turntable.js", "js");

addFile("/gfdzp201508257998/Turntable/Style/css_whir.css", "css");

}

//第一步：加载页面js：先加载jQuery后加载用户脚本

function initJs() {

var name = "jquery";

var url = "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js";

var xhr;

var js = window.localStorage ? localStorage.getItem(name) : "";

if (js == null || js.length == 0) {

if (window.ActiveXObject) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

xhr.open("GET", url);

xhr.send(null);

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

js = xhr.responseText;

localStorage.setItem(name, js);

js = js == null ? "" : js;

addTxt(js, "js");

initTurntable(); //确保先引用Jquery

}

};

} else {

addTxt(js, "js");

initTurntable();

}

}

//加载自定义脚本

function initTurntable() {

var name = "turntable";

var url = "/gfdzp201508257998/Turntable/Script/whir.turntable.js";

var xhr;

var js = window.localStorage ? localStorage.getItem(name) : "";

if (js == null || js.length == 0) {

if (window.ActiveXObject) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

xhr.open("GET", url);

xhr.send(null);

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

js = xhr.responseText;

localStorage.setItem(name, js);

js = js == null ? "" : js;

addTxt(js, "js");

}

};

} else {

addTxt(js, "js");

}

}

//第二步：初始化Css

function initCss(name, url) {

var xhr;

var css = window.localStorage ? localStorage.getItem(name) : "";

if (css == null || css.length == 0) {

if (window.ActiveXObject) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

xhr.open("GET", url);

xhr.send(null);

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

css = xhr.responseText;

localStorage.setItem(name, css);

css = css == null ? "" : css;

css = css.replace(/images\//g, "style/images/");

addTxt(css, "css");

}

};

} else {

css = css.replace(/images\//g, "style/images/");

addTxt(css, "css");

}

}

//辅助方法1：动态添加js，css文件引用

function addFile(url, fileType) {

var head = document.getElementsByTagName('HEAD').item(0);

var link;

if (fileType == "js") {

link = document.createElement("script");

link.type = "text/javascript";

link.src = url;

} else {

link = document.createElement("link");

link.type = "text/css";

link.rel = "stylesheet";

link.rev = "stylesheet";

link.media = "screen";

link.href = url;

}

head.appendChild(link);

}

//辅助方法2：动态添加js，css文件内容

function addTxt(text, fileType) {

var head = document.getElementsByTagName('HEAD').item(0);

var link;

if (fileType == "js") {

link = document.createElement("script");

link.type = "text/javascript";

link.innerHTML = text;

} else {

link = document.createElement("style");

link.type = "text/css";

link.innerHTML = text;

}

head.appendChild(link);

}

查看写入记录：

71843b858ea5ff1878cbdcb6a5ecf7fd.png

封装成JS插件：

/**

* 插件功能：使用localStorage缓存js和css文件，减少http请求和页面渲染时间，适用于Web移动端H5页面制作。

* 插件作者：zhangqs008@163.com

* 使用方法：

* 1.使用此插件前，需要给插件的pageVersion变量赋值，建议变量值由服务器后端输出，当需要更新客户端资源时，修改版本值即可。

* 2.加载Js：由于js加载有顺序要求，所以需要将后加载的脚本作为前一个脚本的回调参数传入，如：

* whir.res.loadJs("jquery", "Turntable/Script/jquery-1.8.3.min.js",

* function () {

* whir.res.loadJs("turntable", "Script/whir.turntable.js", null);

* });

* 3.加载css，如：whir.res.loadCss("css", "/Style/css_whir.css", null);

*/

var whir = window.whir || {};

whir.res = {

pageVersion: "", //页面版本，由页面输出，用于刷新localStorage缓存

//动态加载js文件并缓存

loadJs: function (name, url, callback) {

if (window.localStorage) {

var xhr;

var js = localStorage.getItem(name);

if (js == null || js.length == 0 || this.pageVersion != localStorage.getItem("version")) {

if (window.ActiveXObject) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

if (xhr != null) {

xhr.open("GET", url);

xhr.send(null);

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

js = xhr.responseText;

localStorage.setItem(name, js);

localStorage.setItem("version", whir.res.pageVersion);

js = js == null ? "" : js;

whir.res.writeJs(js);

if (callback != null) {

callback(); //回调，执行下一个引用

}

}

};

}

} else {

whir.res.writeJs(js);

if (callback != null) {

callback(); //回调，执行下一个引用

}

}

} else {

whir.res.linkJs(url);

}

},

loadCss: function (name, url) {

if (window.localStorage) {

var xhr;

var css = localStorage.getItem(name);

if (css == null || css.length == 0 || this.pageVersion != localStorage.getItem("version")) {

if (window.ActiveXObject) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

if (xhr != null) {

xhr.open("GET", url);

xhr.send(null);

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

css = xhr.responseText;

localStorage.setItem(name, css);

localStorage.setItem("version", whir.res.pageVersion);

css = css == null ? "" : css;

css = css.replace(/images\//g, "style/images/"); //css里的图片路径需单独处理

whir.res.writeCss(css);

}

};

}

} else {

css = css.replace(/images\//g, "style/images/"); //css里的图片路径需单独处理

whir.res.writeCss(css);

}

} else {

whir.res.linkCss(url);

}

},

//往页面写入js脚本

writeJs: function (text) {

var head = document.getElementsByTagName('HEAD').item(0);

var link = document.createElement("script");

link.type = "text/javascript";

link.innerHTML = text;

head.appendChild(link);

},

//往页面写入css样式

writeCss: function (text) {

var head = document.getElementsByTagName('HEAD').item(0);

var link = document.createElement("style");

link.type = "text/css";

link.innerHTML = text;

head.appendChild(link);

},

//往页面引入js脚本

linkJs: function (url) {

var head = document.getElementsByTagName('HEAD').item(0);

var link = document.createElement("script");

link.type = "text/javascript";

link.src = url;

head.appendChild(link);

},

//往页面引入css样式

linkCss: function (url) {

var head = document.getElementsByTagName('HEAD').item(0);

var link = document.createElement("link");

link.type = "text/css";

link.rel = "stylesheet";

link.rev = "stylesheet";

link.media = "screen";

link.href = url;

head.appendChild(link);

}

}

调用该插件：

//入口函数

whir.res.pageVersion = "1002"; //页面版本，用于检测是否需要更新缓存

whir.res.loadJs("jquery", "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js",

function () {

whir.res.loadJs("turntable", "/gfdzp201508257998/Turntable/Script/whir.turntable.js", null);

});

whir.res.loadCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css", null);

以上所述是小编给大家介绍的移动端使用localStorage缓存Js和css文的方法(web开发)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

weixin_39885412
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端使用localStorage缓存Js和css文的方法(web开发)
11-26
本文主要讨论如何利用浏览器的localStorage特性来缓存JavaScript（js）和CSS（css）文件，以降低页面加载时间。这种方法尤其适用于移动端，因为移动设备的网络连接可能不稳定或者速度较慢。 首先，localStorage是...
【转自网络】JS实现保存当前网页HTML到本地
一明
09-15 8217
"UTF-8"> 网页HTML存本地 "http://libs.baidu.com/jquery/1.9.0/jquery.js"> "#">保存文件 function fake_click(obj) { var ev = document.createEvent("MouseEvents"); ev.initMouseEvent( "cl
【前端面试题】javascript中实现本地缓存的方法和区别
二琳爱吃肉的博客
11-12 3651
实现本地化存储的三种方法 localStorage sessionStorage cookie
android js清缓存,android - 重磅：实现了对于js/css/png等文件的缓存．　只要能拦截，就可以缓存！...
weixin_31934101的博客
05-27 266
android - 重磅：实现了对于js/css/png等文件的缓存．　只要能拦截，就可以缓存！2017-08-13 19:20访问量: 1781分类：技术啥也不说了，直接上代码．核心方法是：　　queryFromCacheIfPossible　(代码不完整，仅仅是个描述作用．　TODO: 公开成 github项目)@Overridepublic void onPageStarted(WebVie...
html5本地存储localstorage
益之的专栏
05-12 1万+
用户名、密码保存，自动登录等，可以通过设置cookie
五、cookie、session、token、localstroage、sessionStroage区别
最新发布
qq_43631129的博客
11-28 754
五、cookie、session、token、localstroage、sessionStroage区别
Mobot：JSCSS移动端LocalStorage缓存资源方案
02-04
移动端LocalStorage缓存资源方案 安装 npm install mobot 使用 mobot . timeout = 10000 ; // 请求超时10s mobot . prefix = 'mobot-' ; // LocalStorage前缀 mobot . expire = 24 * 7 ; // 7天的缓存时间 mobot . ...
localStorage的黑科技-js和css缓存机制
12-04
一、发现黑科技的起因 今天在微信公众号看到一篇技术博文，想用印象...脑袋里灵光一闪，不会是用localStorage做了缓存吧？！赶紧看了下localStronge,还真是。。。。 心里一阵澎湃，这不是我之前就想实现的加载性能优
js 如何处理缓存？如何清除缓存。
做一个有知识的流氓
12-01 3481
【代码】js 如何处理缓存？如何清除缓存。
php清除手机浏览器缓存,js清除浏览器缓存的几种方法
weixin_42364780的博客
03-28 295
JS 缓存的问题一直都是我们又爱又恨的东西。也是我们比较头痛的问题， 一方面为了提高网站响应速度,减少服务器的负担,和节省带宽，将需要将静态资源缓存在客户端， 但是另一方面，当js 文件有改动的时候，如何快速的将客户端缓存的js文件都失效，这是非常头痛的问题。 以至于每次客户反馈问题的时候，我们第一个解决办法都是清理浏览器缓存。一、使用参数第一、脚本并不存在，而是服务端动态生成的，因此带了个版本号...
小强的HTML5移动开发之路（19）——HTML5 Local Storage（本地存储）
水寒
01-13 4623
一、浏览器存储的发展历程 本地存储解决方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。 借用网上的一张图来看下目前主流的本地存储方案： Cookie： 在web中得到广泛应用，但局限性非常明显，容量太小，有些站点会因为出
uni-app的本地储存 类似h5的localstorage
热门推荐
xiaojun201593的博客
03-16 1万+
uni-app的本地储存 类似h5的localstorage 在安卓端上是不支持localstorage的，uni-app的本地储存是什么？ 1、将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。 uni.setStorage({key: 'storage_key',data: 'hello'}); 2、从本地缓存中异步获取指定 key 对应的内...
移动端localstorage本地存储的使用
liangmaxmin的博客
07-29 3367
window.sessionStorage window.localstorage
移动端+PC端兼容性
alice9999999的博客
01-08 1119
1 localstorage针对部分安卓手机不能使用，cookie在ios中存中文存在问题
Javascript高级知识之移动端和本地存储
清辞的博客
11-04 1153
移动端触屏事件 移动端常见特效 移动端开发插件框架 window.sessionStorage window.localStorage
cookie、localStorage、sessionStorage三种客户端存储方式
jjjh968的博客
09-14 2245
cookie cookie是http协议下，服务端或者脚本可以维护客户端信息的一种方式。 域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值对。 sessionStorage（会话存储） 同源策略： 不同于 Cookie， sessionStorage 访问限制更高，只有当前设定了 sessionStorage 的域下才能访问。单标签页： 两个相同域下的标签页不能互通。 即：在关闭标签页或者新开的标签页下都不能访问之前写下的 sessionS
HTML5本地存储Localstorage
weixin_34358365的博客
05-17 184
什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪，咨询下来是要缓存一些信息，以避免在URL上面传递参数，但没有考虑过cookie会带来什么问题： ① cookie大小限制在4k左右，不适合存业务数据 ② cookie每次随HTTP事务一起发送，浪费带宽 我们是做移动项目的，所以这里真实适合使用的技术是localstorage，localstora...
uni.getStorageSync获取手机端H5存储的缓存（localStorage）数据
喵喵喵~~~的博客
09-07 1万+
如题，我们须有先了解相关知识 需要先掌握uni-app关于数据缓存的api 传送门 需要了解html5的plus关于Storage模块的知识 传送门 如下h5代码 document.addEventListener('plusready', function(){ plus.storage.setItem('info', '喵喵喵~~~');//存数据 let ret = plus.storage.removeItem('info');//取数据 console.log(ret); //控制台
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值