如何在 localStorage 中存储 javascript 或 css 文件答案

【问题标题】：How to store javascript or a css file in localStorage如何在 localStorage 中存储 javascript 或 css 文件
【发布时间】：2016-06-10 06:50:09
【问题描述】：

如何以编程方式存储特定的 JavaScript 或 CSS 文件到浏览器的本地存储，并在需要时检索它如果当前会话过期，则将其从本地存储中删除。

我们通过这个例子来理解（伪代码）：

var load_from_server = true;
if (detect local storage)  
{
  if (cache of css, js found)
  {
     load the css and js from local storage cache
     load_from_server = false;
  }
}
if (load_from_server)
{
   document.write('<script>...');
}

$( window ).unload(function() {
  clear local storage cache
});

我需要这样的东西。我提到了很多关于堆栈溢出的博客和 QA，但没有得到但没有得到我正在寻找的东西。 请建议我该怎么做。？

【问题讨论】：

检查appchache 是否有帮助。参考链接 - html5rocks.com/en/tutorials/appcache/beginner
尝试阅读：programmers.stackexchange.com/questions/105524/…
@A.J 我尝试使用 appchache :。但这不起作用，我不知道为什么。
如果会话过期，从本地存储中删除资产，您可以使用会话存储。当浏览器自动关闭时，它会删除存储。
@neallred 如何使用会话存储。？你有任何代码sn-p吗？或者您是否遇到过任何具有相同代码 sn-p 的文章。？

标签： javascript caching local-storage browser-cache

【解决方案1】：

您不能将文件存储在本地存储中。但是你可以使用html5的menifest来存储html、css、js和图片。

查看其他线程以获取更多详细信息。

Storing CSS and JS in Local Storage

【讨论】：

【解决方案2】：

简而言之，是的，但我不建议您这样做。试试看这个，和你的问题一样： https://softwareengineering.stackexchange.com/questions/105524/is-it-realistic-to-make-use-of-html5-local-storage-to-store-css-and-javascript

【讨论】：

【解决方案3】：

嗯，这对我有用。如果您还将具有最后更改日期的变量存储在本地存储中，并将另一个变量传递给您的脚本，则在离开页面时不必清除存储。您可以比较这两个日期，并仅在必要时从服务器加载较新的脚本。如果用户返回该页面，尤其是在连接速度较慢时，它会提高性能。

从服务器加载脚本：

jQuery.loadScript(<your_script_url>);
jQuery.loadScript = function (url) {    
    jQuery.ajax({
        url: url,
        dataType: 'script',
        cache: false,   
        async: true,
        success: function(response){            
            save_script_in_local_storage(response);         
        }
    });
}

将其保存在本地存储中：

function save_script_in_local_storage(script){
    try{
        if (typeof(Storage) !== "undefined" && typeof localStorage !== "undefined" && localStorage !== null && typeof localStorage.setItem === 'function') {
localStorage.setItem("my_script", JSON.stringify(script));
}
    }catch(e){
        console.log(e);
    }
}

从本地存储加载脚本：

if (!load_from_server){
   try{
        if (typeof(Storage) !== "undefined" && typeof localStorage !== "undefined" && localStorage !== null && localStorage.getItem("my_script") !== null) {
           var my_script = JSON.parse(localStorage.getItem('my_script'));
           $('<script>')
                .attr('type', 'text/javascript')
                .attr('id', 'my_script')
                .text(my_script)
                .appendTo('head');
        }else{                  
           jQuery.loadScript(<your_script_url>);
        }
  }catch(e){
     jQuery.loadScript(<your_script_url>);
  }
}

【讨论】：