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 delay Hide/Show events until Iframe loads after a submit

    How can I get a box shadow to start below a thick border?

    How to center text in lists?

    How to set background-color on 50% of area CSS

    how to create Active State in CSS Navigations

    How to test a web designer on css layouts?

    How do I center two divs within a larger div?

    Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?

    show/hide css menu item depending user role using

    How can I select the first IFRAME within the second FB tag in a div?

    CSS/PHP: How to make the next div appear on the side instead

    How to use Bootstrap3 media queries for custom CSS? [closed]

    How to make css border shape [duplicate]

    how to center text AND have max width of 800px in CSS?

    how to make dynamically loaded image with different width and height responsive in css

    How to keep my hover unchanged after it's release

    in slick slideshow, just want center slide to be active

    How can I center an iframe but also have it display inline?

    How to give background image in CSS? [closed]

    How to position background image inside table cell with padding

    how to set image for anchor tag in mvc through css?

    How to make a picture hover over others without moving the other pictures?

    inside :before element

    Styling the placeholder of an input, how can I do this? [duplicate]

    How to set CSS attributes to default values for a specific element (or prevent inheritance)

    How to filter and show only applied CSS in Chrome Developer Tools (like Firebug in Firefox)

    How to regex rotate properties from transform value

    How can I get a CSS class selector to override the input[readonly] selector?

    How to automatically choose which css to use depending on the URL/website and/or server I'm on?

    How to make this HTML change work? [closed]