我可以将javascript存储在本地存储对象中并运行它吗？

Question

让我解释.我正在开发一个javascript应用程序来帮助人们开发网站.我不会明确地了解它的作用,只知道它的工作原理是将它的html/inline css接口叠加在正在开发的网站上,并提供各种工具,如跟踪图像和代码缩小器.

我把它作为.js文件存储在服务器上.所有人要访问我的应用程序都是复制并粘贴一小部分html到他们的页面上使用它,如下所示:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="www.example.com/application.js">
<div class="application"></div>

然后使用jquery的.html()函数将接口的html和内联css插入到'application'div中.

一切都很完美.

除了一件事.加载时间.当用户开发他们的网站时,他们将不断刷新他们的页面,这导致他们不得不等待大约3秒钟(随着时间的推移非常烦人)加载应用程序的界面.

当然,如果打开浏览器的缓存,则问题会消失,但如果您正在开发网站,则需要禁用缓存!这是一个难题.

然后我想使用本地存储对象来保存接口的svg图形的字符串,然后将.html()这些字符串转换为内联css.这是一个精心设计的解决方法,但只有开发人员才会使用此工具.它不是最终用户的事情.它也很漂亮,但事实是,浏览器仍然需要下载脚本才能知道访问本地存储的图像!处理器速度不是瓶颈,而是带宽.

所以我在考虑将脚本本身存储在本地存储对象中,并使用一个很小的初始化脚本来运行它.

初始化脚本将简单地从本地stroage对象中检索脚本作为字符串,相应地解析它然后运行它.

重申我的问题,运行它是我不能做的部分!我可以通过.html(脚本)将脚本插入到页面中,但是我该如何运行呢？

Answer 1

虽然使用eval(myScript)是最直接的方法,但我更喜欢这样:

var script = document.createElement('script');
script.src = 'data:text/javascript,' + encodeURI(myScript);
script.onload = function() {
  //optional callback
};
document.body.appendChild(script);

这是使用数据uri作为源插入实际脚本标记.这样,它将显示在开发工具的资源选项卡上的"脚本"下.加载脚本时,将执行数据uri(您的代码).

Answer 2

这有两种方法:

方法1: eval()

eval(localStorage.myCode);

方法2:Function构造函数

new Function(localStorage.myCode)();

以下是jsfiddle演示,显示它们都有效:

方法1:http://jsfiddle.net/markasoftware/3BkAV/

方法2:http://jsfiddle.net/markasoftware/j6JAz/