I have the text for 1..n style sheets stored in localStorage, each with their own key (i.e. each stored individually as an item in localStorage).
I'm trying to figure out how I can add (any of) these style sheets to my page, with localStorage being the source.
I understand how to dynamically add a <link> or <style> to the <head>. What I don't understand is how to populate the added <link> or <style> with content from localStorage.
In the <style>, I've tried styleElement.innerText/innerHTML = myCSSTextFromLocalStorage. No joy.
This project is only developing to the most recent browsers, with decent HTML5 and CSS3 support.
I have managed to dynamically add to the page my styles from localStorage by wrapping the text in a <style> tag then appending the resulting text to the innerHTML of the body. It works in all 5 of the latest browsers. However, that's a bit hacky imo. If anyone knows how to get these styles into the <head>, I'm still interested in an answer to my original query. Cheers.
Last edited by JimmyJimmy; 04-07-2012 at 04:57 PM.
I haven't done any extensive cross-browser testing, but you should just be able to dynamically add a style tag:
var n = document.createElement('style');
n.type = 'text/css';
n.innerHTML = localStorage.css;
I think you can use an existing tag too ... but, I'm pretty sure the above will work. However, there's an entirely different, presumably better approach that's designed to take care of this seamlessly for you, provided that you're not dynamically writing individual styles: