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

Can I store javascript in a Local Storage Object and run it?

本文关键字：存储 运行 对象 javascript 我可以      更新时间：2023-09-26

让我解释一下。我正在开发一个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中。这是一个简单的解决方法，但只有开发人员会使用这个工具。这不是最终用户的事情。它也很好用，但问题是，浏览器仍然需要下载脚本才能访问本地存储的图像！处理器速度并不是它的瓶颈，而是带宽。

所以我想把脚本本身存储在一个本地存储对象中，并用一个小的初始化脚本来运行它

初始化脚本只需将脚本作为字符串从本地存储对象中检索出来，并相应地进行解析，然后运行它。

重申我的问题，运行它是我不能做的部分！我可以通过.html（脚本）将脚本插入到页面上，但我该如何运行它呢

虽然使用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（您的代码）。

这里有两种方法：

方法1:eval()

eval(localStorage.myCode);

方法二：Function构造函数

new Function(localStorage.myCode)();

以下是jsfiddle演示，显示它们都可以工作：

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

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

您只需要使用JavaScript的eval函数。

你最终可能会写下这样的东西：

localStorage.myCode = "alert('just a test')";
eval(localStorage.myCode);

你可以检查你的代码是否像这样存储：

if (!localStorage.myCode) {
    // local storage code not exists, load from somewhere else
} else {
    // perform the eval using the code from local storage
}

我在Chrome中测试了这段代码并运行了。我看到的唯一问题是，你强迫用户只使用支持本地存储的浏览器。

以下是浏览器支持：

  • IE 8+
  • FireFox 3.5+
  • Safari 4+
  • 铬4+
  • 歌剧10.5+
相关文章：