本地存储中的 Javascript 文件答案

【问题标题】：Javascript File from Local Storage本地存储中的 Javascript 文件
【发布时间】：2014-11-16 14:37:08
【问题描述】：

我有一个较大的 JavaScript 文件，我不想在每次请求时都将它发送给客户端，而且它对于浏览器来说太大而无法缓存。

我的想法是将文件保存到HTML5 local storage 并尝试检索它。如果找到该文件，那么我想将其链接/导入/导出（我不知道正确的术语）到与 html src 标记相同的范围内。

我的问题是：如何获取从本地存储中提取的文件并让我的网页将其识别为通过 src 标记包含的 JavaScript 文件？（减去从存储中提取文件的逻辑）

【问题讨论】：

我同意您所说的 epascarello，但我的问题是关于 .js 文件太大而无法被浏览器缓存。至少在我的 html 模板中写了数百行 src=/foo.js 行之后，我现在意识到我真的不知道它甚至可以做什么或如何以编程方式模拟它。
您可以最初将 jsfile 请求为纯文本，然后将该纯文本存储在本地存储中。那时你只需要以一种或另一种方式评估它。但是请注意这篇文章：ejohn.org/blog/dom-storage
检查是否有东西已经在存储中，检查是否是那个文件，如果没有，当然用js创建一个脚本标签，将src分配为你的js（这也是jsonp的工作方式），获取内容脚本标签，以字符串形式放入本地存储...如果有文件存储。然后获取字符串，创建脚本标签，加载字符串。
@MuhammadUmer 我很清楚我理解.. 我基本上只是在文档中附加一个脚本标签，然后从 localStorage 加载代表我的 .js 文件的字符串？
是的，然后只需调用从存储中加载的字符串中的函数

标签： javascript html

【解决方案1】：

您可以使用 JSON 对文件内容进行字符串化并将其放在本地存储中。

var content = JSON.stringify([1, "some info"]);       // '[1,"some info"]'

localStorage.setItem('fileContent', content);

// Retrieve
var content = localStorage.getItem('fileContent');

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

【讨论】：

如果你想存储数据，这很好，但不能很好地使用函数。
仅用于存储函数内部使用的“数据”。函数“逻辑”可以加载到js文件中。
我不会否决 Borachio 的答案，因为有人可能会觉得它很有用。但是，OP 明确指出问题是关于将 javascript 方法从 localstorage 绑定到文档，并特别指出从 localstroage 检索文本的逻辑不是所要求的......在 cmets 部分下质疑 Kevin B 和 Muhammad Umer 都提供了有关 OP 的有用信息。
@KevinB 如果你正确地转义了{ 那么函数应该可以工作......对吗？
在将函数传递给 JSON.stringify 之前，您必须将其完全字符串化。

【解决方案2】：

我的问题是：如何获取从本地存储中提取的文件并让我的网页将其识别为通过 src 标签包含的 JavaScript 文件？

两种可能的方式（可能还有其他方式）：

创建一个script 元素，并将您的 JS 代码分配为该元素的“文本内容”，然后将其附加到 DOM。此处引用的“文本内容”，因为它不像跨浏览器听起来那么简单——参见 f.e. Javascript script element set inner text、Executing elements inserted with .innerHTML 或
通过Data URI、data:text/javascript,… 将您的脚本代码分配给script 元素的src 属性——但这种方法也有一些缺点，尤其是在较旧的IE 中（大小限制；只有 “不可导航” 内容，意味着没有脚本）。但取决于您的目标环境，这可能会很好。您不一定需要对脚本代码进行 base64 编码，通过encodeURIComponent 的 URL-percent-encoding 应该也可以。

【讨论】：

好答案！您认为现实的需要是不再担心支持旧版浏览器？举个例子，我在我自己的网站上查看：我只有 2.8% 的流量低于 IE 9。在某些时候，当然，我们都会对支持这小部分的想法耸耸肩。
旧版浏览器支持 - 恕我直言，这取决于您在这种情况下需要什么。对本地存储的支持下降到 IE 8——所以如果你想让它也在那里工作，我会说选项 #1 可能是更安全的方法。但如果你说，“IE10+ 支持对我来说已经足够了”——那么我可能会先尝试选项 #2——它似乎更直接且易于实施。
@Chris，让我标记你，这样你就会看到上面的评论。我以为是 OP 首先要求提供更多细节。
不，一般来说。

【解决方案3】：

看看这个：

http://jsfiddle.net/611e96mz/1/

var tag = getId('testjs'),
    a = getId('a'),
    b = getId('b'),
    c = getId('c'),
    script;

a.addEventListener('click', function () {
    localStorage.setItem('js', tag.innerHTML);
});

b.addEventListener('click', function () {
    script.textContent = localStorage.getItem('js');
});

c.addEventListener('click', function () {
    document.body.appendChild(script);
    alertMe();
});


var script = document.createElement("script");
script.type = "text/javascript";


function getId(x) {
    return document.getElementById(x);
}

【讨论】：