2

I have a large JavaScript file that I'd rather not send to the client on each request and it's too large for the browser to cache.

My thought is that I will save the file to HTML5 local storage and attempt to retrieve it. If the file is found then I'd like to link/import/export(I don't know the proper terminology) it into the same scope that a html src tag would.

My question is: how do I take a file that I've pulled from local storage and get my webpage to recognize it as a JavaScript file that was included via src tag? (minus the logic for pulling the file from storage)

j08691
  • 204,283
  • 31
  • 260
  • 272
Ryder Brooks
  • 2,049
  • 2
  • 21
  • 29
  • I agree with what you're saying epascarello, but my question is regarding a .js file that is too large to be cached by the browser. And at the very least after writing hundreds of `src=/foo.js` lines in my html templates I'm now realizing I don't really know what that even does or how to emulate it programmatically. – Ryder Brooks Sep 22 '14 at 15:21
  • You could request the jsfile initially as plain text and then store that plain text in local storage. At that point you would just need to eval it in one way or another. Take note however of this article: http://ejohn.org/blog/dom-storage/ – Kevin B Sep 22 '14 at 15:47
  • check if there is something already in storage, check if it's that file,if no create a script tag with js ofcourse, assign src to be your js (this is how jsonp also works), get content of script tag, put it in local storage in a string form...and if there is file storage. Then get the string, create script tag, load the string. – Muhammad Umer Sep 22 '14 at 15:51
  • @MuhammadUmer Just so I'm clear that I'm understanding.. I'm basically just appending a script tag to the document and loading the string that represents my .js file into from localStorage? – Ryder Brooks Sep 22 '14 at 16:11
  • yes and then just call the function in string that you loaded from storage – Muhammad Umer Sep 22 '14 at 16:37

3 Answers3

2

My question is: how do I take a file that I've pulled from local storage and get my webpage to recognize it as a JavaScript file that was included via src tag?

Two possible ways (amongst maybe others):

  • create a script element, and assign your JS code as the “text content” of that element before appending it to the DOM. “Text content” in quotes here, because it is not as simple as it sounds cross-browser – see f.e. Javascript script element set inner text, Executing elements inserted with .innerHTML, or

  • assign your script code to the src attribute of a script element via a Data URI, data:text/javascript,… – but that approach has several disadvantages as well, also mostly in older IE (size limitation; only “non-navigable” content, meaning no scripts). But depending on your target environment that might well work. You will not necessarily need to base64 encode the script code, URL-percent-encoding via encodeURIComponent should work as well.

Community
  • 1
  • 1
CBroe
  • 91,630
  • 14
  • 92
  • 150
  • Good answer! What do you think the realistic need is to worry about supporting legacy browsers anymore? I look, for anecdotal example, at my own site: I've only got 2.8% of my traffic below IE 9. At some point, surely, we'll all shrug our collective shoulders at the idea of supporting that small percent. – Chris Baker Sep 22 '14 at 16:18
  • Legacy browser support – depends on what you need in this case IMHO. Support for local storage goes down to IE 8 – so if you want to make it work in there as well, I’d say option #1 might be the safer approach. But if you say, _“IE10+ support is enough for me”_ – then I’d probably give option #2 a try first – it seems a bit more straight forward and easy to implement. – CBroe Sep 22 '14 at 16:22
  • 1
    @Chris, let me tag you so you’ll see the above comment. I thought it was the OP asking for more specifics first. – CBroe Sep 22 '14 at 16:23
  • Nah, just generally speaking. – Chris Baker Sep 22 '14 at 16:25
1

Take a look at this:

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);
}
Muhammad Umer
  • 17,263
  • 19
  • 97
  • 168
0

You can use JSON to stringfy your file content and put it on localstorage.

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

Savrige
  • 3,352
  • 3
  • 32
  • 38
  • This is great if you want to store data, but doesn't work too well with a function. – Kevin B Sep 22 '14 at 15:46
  • use only to store "data" used inside the function. The function "logic" can be loaded in a js file. – Savrige Sep 22 '14 at 15:50
  • I'm not going to down vote Borachio's answer because someone may find it useful. But, the OP clearly states that the question is about binding javascript methods from `localstorage` to the document and specifically states that the logic for retrieval of text from `localstroage` is not what is being asked for.. In the comments section under the question both Kevin B & Muhammad Umer have provided useful information regarding the OP. – Ryder Brooks Sep 22 '14 at 16:01
  • @KevinB what if you properly escaped `{` then functions should work..right? – Muhammad Umer Sep 22 '14 at 16:20
  • you would have to stringify the function entirely before passing it to JSON.stringify. – Kevin B Sep 22 '14 at 16:21
  • what's wrong with that and what were people trying to do? – Muhammad Umer Sep 22 '14 at 21:15