How to prevent rendering css when loading stylesheet from local storage?

Tags: javascript,jquery,css,json,local-storage

Problem :

Following problem - I stored a stylesheet in the local storage. But when I try to load it from there I use JSON.parse() and it seems that the browser will already render the CSS. But I would prefer the browser to treat the parsed CSS as text, then append the text to a style tag.

The Code:

loading the stylesheet from server and store it in local storage

function load_css(url){
            url: url,
            cache: false,
            dataType: 'text',       
            success: function(res){ 
                $('<style>').attr('id', 'my_style').text(res).prependTo('#my_div');         
                if (typeof(Storage) !== "undefined" && typeof localStorage !== "undefined" && localStorage !== null && typeof localStorage.setItem === 'function') {
                    localStorage.setItem("my_style", JSON.stringify(res));                                  
            error: function(err){

within another function the styles shall be loaded from local storage if set:

    if (typeof(Storage) !== "undefined" && typeof localStorage !== "undefined" && localStorage !== null && localStorage.getItem("my_style") !== null) {
        var css = JSON.parse(localStorage.getItem('my_style'));
        $('<style>').attr('id', 'my_style').text(css).prependTo('#my_div');
        ... //load style from server if local storage not available, item not found

Even when I leave out the line with the created style tag the css is being rendered. With this line I see that if I inspect an element the element styles appear twice in the developer tool bar. So how could I prevent the browser from rendering the styles when using JSON.parse(). Maybe there is another method that treats the styles from local storage as plain text?

Solution :

You are calling this

$('<style>').attr('id', 'my_style').text(res).prependTo('#my_div');   

before storing it. So it's on the document once you get it through ajax, and then on the other code you just put it again.

    CSS Howto..

    How to change a position of css sprite image?

    How to draw child element's border outside its parent in CSS (or simulate this effect)?

    How to fix some issues with printing very basic HTML

    How to use media queries in css

    How to make a div scroll able when window height is reached

    How to improve page speed in google? [closed]

    how to find a css class which has another css class as sibling

    Why does a div with background-color show fixed elements below?

    How would I set this up? [closed]

    How to add space between table cells `td`?

    How Do I Anchor tag in XSLT?

    How can I join background images?

    How to make a svg-filled background go animating by pure CSS?

    PHP: How to style session output [closed]

    How to apply CSS style when ID is taken?

    How to write conditional css?

    JQuery, fade out table row and contents (on scroll) in ratio to how much the row is hidden by containing div

    How to reference a long class name with spaces in CSS?

    How can I make all images of different height and width the same via CSS?

    How to prevent long text from flowing out of a container

    How to use Grunt while continually compressing css / javascript

    How do I insert an image in HTML so that its fills up the entire screen regardless of screen size?

    How to style an add to cart

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    Positioning in CSS : How to make an absolute-positioned content display outside of its relative-positioned parent?

    How to add a background Image using CSS that looks like a border down each side of a div

    CSS: How do I stretch a background with a different z-index to height of page contents

    How to control the appearance of a widget on client web sites CSS

    How do I inspect CSS pseudo classes with firebug?

    Making breadcrumbs… not as easy as literally making breadcrumbs, how can I get text to be inside?