Storing CSS and JS in Local Storage

Question

My webapp is primarily used on mobiles so I'm looking to store static CSS and JS files to reduce the loading time. Its a trick even Google and Bing seems to use I read somewhere.

Although I understand getting and setting values is easy:

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

... but I'm not sure how I could set, get and render/execute CSS stylesheets and Javascript files. Any example would help.

What is the value of doing this? That's what the cache does surely? — Jamie Barker, Jul 07 '15 at 11:00
@JamieBarker http://programmers.stackexchange.com/questions/105524/is-it-realistic-to-make-use-of-html5-local-storage-to-store-css-and-javascript — eozzy, Jul 07 '15 at 11:02
I see, however the accepted answer here I feel was accepted because the poster was already biased that way. The answers with the two highest amount of votes seem most appropriate to me, in particular the one by MainMa who has 75k rep, as opposed to the accepted answerer who has 206 rep. — Jamie Barker, Jul 07 '15 at 11:08
Beware of iOS mobile devices... when in `Private Browsing` mode they don't allow use of local storage - something to be mindful of — StudioTime, Jul 07 '15 at 11:22
This question is dangerous. LocalStorage have a limit of 10 MB (per origin in Chrome, totally in other browsers). CSS and JS if webapp is strongly big you can full this memory. But is a good idea. Otherwise, exists the WebSQL technology and Transactional DB technology that allows you to store infinite (in theory) data. — Marcos Pérez Gude, Jul 07 '15 at 11:24

score 6 · Accepted Answer · answered Jul 07 '15 at 11:25

maybe you are looking for appCache which download the source of your files once and checks only if appcache file is modified to update your source.

This is really simple to implement.

update your html

<html manifest="myfile.appcache">

Create your appcache file: myfile.appcache in your project root folder

CACHE MANIFEST
# LIST ALL YOUR FILES 

NETWORK: 
*

See official doc for more info : http://www.w3schools.com/html/html5_app_cache.asp

Good explanation from html5rocks : http://www.html5rocks.com/en/tutorials/appcache/beginner/

Gmail uses both localStorage and App Cache, I'll try the same. — eozzy, Jul 10 '15 at 05:42

score 2 · Answer 2 · edited May 23 '17 at 10:29

In your example it should be var retrievedObject = JSON.parse(localStorage.getItem('testObject'));. As localStorage can only handle string value pairs by now, it would be worth a try to make up a new Object like this:

{type: "css", blob: "<serverside rendered>", deferred: false}

Here is an example:

var resources = [
  {type: "css", blob: ".unknown { color: red; } div { margin: 20px; }", deferred: false}
]

function appendResources(){
  var head =  document.getElementsByTagName("head")[0];
  for(var resourceIndex in resources){
    var resource = resources[resourceIndex]
    if(resource.type == "css"){
      /* https://stackoverflow.com/a/6211716/3244925 */
      var element = document.createElement("style");
      element.type = "text/css";
      element.appendChild(document.createTextNode(resource.blob));
      head.appendChild(element)
    }
  }
}

document.getElementsByTagName("button")[0].addEventListener("click", appendResources);

<div class="unknown">Defaultly, i have no style.</div>
<button>Add style from localStorage</button>

You can fill an array of object like these by your server side implementation and append them to the dom later on. This example only handles CSS and makes no difference for deffered items, as it appends everything to the <head>, but you get the idea.

I copied the interesting part of this answer: https://stackoverflow.com/a/6211716/3244925

These objects can be saved in the localStorage using: localStorage.setItem('resources', JSON.stringify(resources)); and later on be re used.

Update

I feel the answer to your question may be much simpler. If your .css and .js files are static, you may just make up an array of external resources (urls) and append those urls to the <head> and <body> later on, once you loaded them from the localStorage. This will render this inline styles and javascript useless, and it would be a much cleaner solution.

score 1 · Answer 3 · answered Jul 07 '15 at 11:19

Once you load a webpage for the first time, browser stores all its major content in the cache. So, since this caching process is not biased you can not make any content stable under browser cache.

HTML5 has a utility called local storage. It is used to save data like cookies and text under a special storage provided by the browser & cache does not have any relation with it.

However, you can store the css in the string format inside localstorage but not the css file.

can you suggest any code snippet to store "css in the string format inside localstorage".? — , Jun 10 '16 at 07:38

Storing CSS and JS in Local Storage

3 Answers3

Update

Linked