静态资源（JS/CSS）存储在localStorage，适用于Web移动端H5页面制作

最新推荐文章于 2023-01-03 20:16:35 发布

原创

最新推荐文章于 2023-01-03 20:16:35 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种通过localStorage缓存静态资源（JS/CSS），以减少HTTP请求和提高页面渲染速度的方法，适用于Web移动端H5页面制作。详细阐述了加载流程，并提到了适用于缓存的场景，如非首屏渲染的CSS和展示类代码，同时提供了Android端启用localStorage的设置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

localStorage使用
(1)PC上应用价值不大：
兼容性不太好，不支持LS的浏览器比例仍然很大
网络速度快，协商缓存响应快，LS读取+eval很多时候会比不上304
通常需要SEO，导致css不能缓存，仅缓存js使得整个缓存方案意义进一步减小
浏览器本地缓存足够可靠持久

跨页面间共享缓存即便有浪费也差别不大

(2)移动端webapp值得一试：
兼容性好
网速慢，LS读取+eval大多数情况下快于304
webapp不需要seo，css也可以缓存，再通过js加载

浏览器缓存经常会被清理，LS被清理的几率低一些

自定义插件：

/**
    * 插件功能：使用localStorage缓存js和css文件，减少http请求和页面渲染时间，适用于Web移动端H5页面制作。
    * 使用方法：
    *   1.使用此插件前，需要给插件的pageVersion变量赋值，建议变量值由服务器后端输出，当需要更新客户端资源时，修改版本值即可。
    *   2.加载Js：由于js加载有顺序要求，所以需要将后加载的脚本作为前一个脚本的回调参数传入，如：
    *   whir.res.loadJs("jquery", "<%= BasePath %>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();
&n