Geek Answers Handbook

Storing CSS and JS in local storage

My webapp is mainly used on mobile phones, so I am looking to store static CSS and JS files to reduce load time. Even Google and Bing seem to use his trick, I read somewhere.

Although I understand that 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 can install, get and display / execute CSS styles and Javascript files. Any example will help.

+5
source share
3 answers

Perhaps you are looking for an application that downloads the source of your files once and only checks if the appcache file has been modified to update your source.

It is really easy to implement.

update html

 <html manifest="myfile.appcache">

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

 CACHE MANIFEST # LIST ALL YOUR FILES NETWORK: *

See white paper for more info: http://www.w3schools.com/html/html5_app_cache.asp

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

+6
source

In your example, this should be var retrievedObject = JSON.parse(localStorage.getItem('testObject')) Since localStorage can only process pairs of row values, it’s now worth trying to create a new object as follows:

 {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"){ /* /questions/59500/how-do-you-add-css-with-javascript/412808#412808 */ 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 populate an array of objects like these with your server side implementation and then add them to dom. This example only handles CSS and does not make any difference to the deferrable elements, as it adds everything to the <head> , but you get the idea.

I copied the interesting part of this answer: fooobar.com/questions/59500 / ...

These objects can be stored in localStorage using: localStorage.setItem('resources', JSON.stringify(resources)); and then use again.

<h / ">

Update

I feel that the answer to your question can be much simpler. If your .css and .js files are static, you can simply compose an array of external resources (URLs) and add these URLs to <head> and <body> later, once you have downloaded them from localStorage . This will make these inline styles and javascript useless, and it will be a much cleaner solution.

+2
source

As soon as you load the web page for the first time, the browser stores all the main content in the cache. Thus, since this caching process is not biased, you cannot make the content stable in the browser cache.

HTML5 has a utility called local storage. It is used to store data, such as cookies and text, in a special storage provided by the browser, and the cache has nothing to do with it.

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

+1
source

More articles:


All Articles