在 HTML5 本地存储中缓存整个 jquery.min.js 文件答案

【问题标题】：Cache entire jquery.min.js file in HTML5 localstorage在 HTML5 本地存储中缓存整个 jquery.min.js 文件
【发布时间】：2015-07-11 22:51:36
【问题描述】：

我一直在尝试使用 localstorage 来存储 Jquery-min，但我无法做到。我已经尝试了一些 Jquery 插件，但它们也不起作用。

为我的 Web 应用程序加载一次 Jquery 并且再也不用担心它似乎是一个好主意。我正在创建的应用程序每天都有人访问。我认为他们不需要多次下载 JS 文件或 CSS 文件。

我可以将所有 CSS 存储在本地存储中，但不能存储 Jquery 或 Jquery UI。

无论如何，我知道人们会尝试说服我使用缓存清单......等等。但我正在寻找一种将 Jquery 库存储在本地存储中的方法。（这就是目标）。

有什么想法吗？

编辑： 每个人都在要求一个代码示例。所以在这里....这很简单，我只使用了少量的 Jquery 缩小版本来保持帖子的小：

localStorage.setItem("name", "(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!cj[a]){var b=f('<'+a+'>').appendTo('body'),d=b.css('display');b.remove();if(d==='none'||d===''){ck||(ck=c.createElement('iframe'),ck.frameBorder=ck.width=ck.height=0),c.body.appendChild(ck);if(!cl||!ck.createElement)cl=(ck.contentWindow||ck.contentDocument).document,cl.write('<!doctype><html><body></body>");

查看时保存的内容：

(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!cj[a]){var b=f('<'+a+'>').appendTo('body'),d=b.css('display');b.remove();if(d==='none'||d===''){ck||(ck=c.createElement('iframe'),ck.frameBorder=ck.width=ck.height=0),c.body.appendChild(ck);if(!cl||!ck.createElement)cl=(ck.contentWindow||ck.contentDocument).document,cl.write('

它不会保存所有内容。我可以使用 parsefloat() 什么的吗？如果可行，我该怎么做？

我喜欢本地存储的原因是我可以轻松控制它。而且我不必担心用户清空缓存。如果我需要更新本地存储，我可以用一行代码来完成。它几乎充当了我的 Web 应用程序的更新功能。如果我遗漏了什么或者是否有更简单的方法，请告诉我。示例代码即将推出

【问题讨论】：

您是否遇到特定错误？告诉我们更多关于“不能”的意思。
不要将您的 CSS 或 JS 存储在本地存储中。这不是它的设计目的。设置适当的Expires 标头，让浏览器处理缓存。我知道你说你预料到了这一点，但实际上，当浏览器被设计用来处理这个问题时，你自己尝试这样做是不值得的。只需将到期日期设置为未来一年，即可完成。
第二个 Expires 标头，甚至可以使用像谷歌这样的免费 CDN - code.google.com/apis/libraries/devguide.html#jquery
我想我得到的错误是 localstorage 需要一个字符串。并且 jquery 库不是字符串。一定有办法解决这个问题。
我必须同意@Michael Mior；如果你能用一个用例澄清一下，也许会有所帮助？

标签： javascript jquery html local-storage

【解决方案1】：

如果您在将脚本文件保存到本地存储之前对脚本文件进行 Base64 编码，则效果很好。在下面的示例中，我省略了 jQuery 文件，但在演示中，整个 jQuery 1.7 被编码。

我使用以下站点将整个文件编码为一个字符串（大多数将其分成块）：http://textmechanic.co/ASCII-Hex-Unicode-Base64-Converter.html?type=text

演示：http://jsfiddle.net/ThinkingStiff/ZMAKn

HTML：

<div></div>

脚本：

var jquery = '<Base64 encoded file>';
var result = 'jQuery: ' + ( typeof $ != 'undefined' ) + '<br />';

window.localStorage.setItem( 'jquery', jquery );
jquery = '';
jquery = window.localStorage.getItem( 'jquery' );

eval( atob( jquery ) );

result += 'jQuery: ' + ( typeof $ != 'undefined' ) + '<br />';

$( 'div' ).html( result ); //this works, so jQuery loaded

window.localStorage.removeItem( 'jquery' );

输出：

jQuery: false
jQuery: true

【讨论】：

【解决方案2】：

这是一个很棒的练习，并且全部用于 HTML5 本地存储，但是您的 Web 服务器不应该只响应 HTTP 304（未修改）吗？自 1998 年以来，几乎所有的 Web 服务器都支持此功能。让您的服务器使用简单的 304 响应比编写大量 javascript 来将 jQuery 加载到本地存储中或从本地存储中加载出来要快得多。

如果由于某种原因您的网络服务器无法正常工作，请使用public jQuery CDNs 之一，他们将为您执行此操作。

【讨论】：

【解决方案3】：

我同意青色精简版。您需要为此使用浏览器缓存，而不是浪费时间对其进行编码。

如果您不想按照 Cyan 的建议使用 CDN，您可以轻松地在您的服务器上启用缓存：https://developers.google.com/speed/docs/best-practices/caching#LeverageBrowserCaching

【讨论】：