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

Question

Let me explain. I'm developing a javascript application to help people develop websites. I wont explicitly go into what it does, just know that it works by superimposing its html/inline css interface over the website that's being developed and offers a variety of tools such as tracing images and code minifiers.

I have it stored on a server as a .js file. All people have to do to access my application is copy and paste a small bit of html onto their page to use it, like this:

<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>

The html and inline css of the interface is then inserted into the 'application' div using jquery's .html() function.

It all works perfectly.

Apart from one thing. The load time. As a user develops their site they will be continually refreshing their page, and this results them having to wait about 3 seconds (very annoying as time goes on) for the application's interface to load.

Of course, if the browser's cache is turned on, the problem dissappears, but if you're developing a site you're going to want to have your cache disabled! It's a conundrum.

Then I thought to use local storage objects to hold strings of the interface' svg graphics, and then .html() these strings into inline css. It's an elabourate workaround, but only developers would use this tool. It isn't an end user thing. And it works beautifully too, but the thing is, the browser still needs to download the script in-order to know to access the locally stored images! Processor speed isn't bottlenecking it, it's bandwidth.

So I was thinking storing the script itself in a local storage object, and having a tiny initialisation script to run it.

The initialisation script would simply retrieve the script from the local stroage object as a string, parse it accordingly and then run it.

To reiterate my question, running it is the part I can't do! I can insert the script onto the page via .html(script), but then how do I go about running it?

Answer 1

While using eval(myScript) is the most direct approach, I prefer this:

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

This is inserting an actual script tag using a data uri as the source. This way, it will appear under "scripts" on the resources tab of the dev tools. When the script loads, the data uri (your code) will be executed.

Answer 2

Here are two methods:

Method 1: eval()

eval(localStorage.myCode);

Method 2: the Function constructor

new Function(localStorage.myCode)();

Here are the jsfiddle demos showing that they all work:

Method 1: http://jsfiddle.net/markasoftware/3BkAV/

Method 2: http://jsfiddle.net/markasoftware/j6JAz/

Answer 3

You just need to use the eval function of JavaScript.

You can end up writing something like the following:

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

You can check if your code is stored like this:

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

I tested this code in Chrome and works. The only problem I see is that you are forcing your users to use only browsers that support local storage.

Here is the browser support:

• IE 8+
• FireFox 3.5+
• Safari 4+
• Chrome 4+
• Opera 10.5+