如何使用html5 localStorage在iphone Safari上缓存javascript？

我正在构建一个使用主 jquery库和我们自己的js的移动网站.我们的网站太大,数据太多,无法成为简单的离线/在线网络应用.我们需要网络连接.

我正在尝试提高缓存性能,以便为移动网站缓存大量的javascript.众所周知,iPhone的Safari上的缓存仅限于15-25kb的文件,而我们的缩小js约为125kb.

我已经考虑过使用缓存清单,但这样做的缺点是浏览器会在每次加载页面时请求缓存清单,而且由于我们没有使用单页面Web应用程序,因此会向服务器添加额外的请求.

我们可以在localStorage中缓存javascript(在移动safari和android浏览器中可用),然后从那里执行它吗？

解决方法

是的你可以. (很抱歉回答我自己的问题,我认为这是一个有趣的解决方案)

我在幻灯片#12上找到了代码示例的大纲.

http://www.slideshare.net/jedisct1/abusing-javascript-to-speedup-mobile-web-sites

我已经在http://m.bbref.com/实现了这一点(仍处于测试阶段)

在创建新版本时,您必须使用脚本URL的版本控制来刷新缓存,但这适用于具有localStorage的页面,并且在localStorage不可用时也可以使用.我在页脚中添加了一些调试代码,以显示js的加载位置.

我把它分成了一个标题和一个页脚的脚本.这些内联显示.

在标题中(我把它放在这里,因为我们使用modernizr将一些类添加到html标记中,我希望那些尽可能快地用于渲染目的.可以移动到页脚.

<script type="text/javascript">
// .001 is the current js version
// this script assumes it is in the root web directory.
var js_file = "site_lib.001.js";
// vars to store where the file is loaded from.
var _mob_load_js = false;
var _mob_ajax_load_js = false;
{
    // if we have localStorage and the files exists there get it.
    if(window.localStorage && window.localStorage[js_file]) {
            // eval the js file.
            try{
                window.eval(window.localStorage[js_file]);

                // successfully eval'ed the code,so 
                // we don't need to download it later.
            _mob_load_js = true;
            } catch (e) { _mob_load_js = false; }
    }
    else if (window.localStorage) {
        // We have localStorage,but no cached file,so we 
        // load the file via ajax,eval it and then store 
        // the file in localStorage

        // To remove prevIoUs versions,I remove all of our localStorage,// This is extreme if we store other vars there.
        window.localStorage.clear();
        // standard ajax request.
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            // eval the js
            try {
                window.eval(xhr.responseText);
                // successfully eval'ed the code,so 
                // we don't need to download it later.
            _mob_ajax_load_js = true;
            } catch (e) { _mob_ajax_load_js = false; }

        try {
                // store the js.
            window.localStorage[js_file] = xhr.responseText;
        } catch (e) {}
        }
        else {
        return;   
        }
    };
    xhr.open("GET",js_file,true);
    xhr.send();
    }
};
</script>

并在页脚中(出于性能原因).我放置标准加载方法.请注意,只要您设置了过期标头,使用此分支的浏览器都会正确缓存.

<div id="sr_external_script"></div>
<script type="text/javascript">   
// We haven't loaded the js yet,so we create a script 
// tag and get the script the old fashioned way
if (!_mob_load_js && !_mob_ajax_load_js) {
    var script=document.createElement("script");
    script.type="text/javascript";
    script.src=js_file;
    document.getElementById("sr_external_script").appendChild(script);
    // add a note to the footer
    document.write('<div>loaded from server and not stored</div>');
}
else if (!_mob_load_js) {
    // add a note to the footer
    document.write('<div>loaded via ajax and stored in localStorage</div>');
}
else {
    // add a note to the footer
    document.write('<div>loaded from localStorage</div>');
}
</script>

我已经在chrome和safari中确认js是从localStorage加载的,并且站点功能按预期工作,并且没有向服务器发出请求.我已经确认,当在IE或Firefox上运行时,它会加载脚注中的脚本.

注意：我添加了代码来包装try catch中的evals,因为我在firefox中遇到了问题.