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 make a dotted underline link on hover?

    How to force a div to scale at 100% width of the current windows Browser

    How to keep div same height at all times

    How to add image, that overlapping Bootstrap modal?

    in Emacs, how to turn off abbrevs in css-mode?

    How to reset CSS in inline? [closed]

    How to change background on hover for 2 elements using css

    How to ensure that the css border goes inside the image

    How to clip inside a box in css?

    How to set icon of an page using CSS

    How to write print css to get print from web pages in almost same manner as we get from MS word?

    JSP/HTML / JS / CSS - How to create a cancel button in form

    How to use JavaScript OnResize with delay or less processing intensive

    how to disable the highlighting view on selection either in html or css?

    How to change font on css?

    How to use CSS to increase the contrast on visited hyperlinks?

    How to flow text from a box to another with CSS

    How to Create CSS Selector Element including index

    How to save css style after hover action

    How to style CSS role

    I can't figure out how to stop the margin-top from making my child div overflow its parent

    How to create CSS gradient from the centre? [closed]

    A scrollbar showing within DIV. What CSS is causing this?

    How can i setup my php code to change my CSS background picture daily [closed]

    Google font - how to specific font-family If they have the same name?

    How to make a grid layout with unknown number of columns and each column has equal size? [closed]

    How can i get my Jchartfx area graph to show up underneath my gridview?

    How to make CKEditor render text with a CSS?

    How to stop css animation in current position on hover?

    How do I remove the white spaces around my dashboard header on reactjs