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){
        $.ajax({
            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){
                console.log(err);
            }
        }); 
    }

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

try{
    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 flip an image horizontally halfway through an animation

    jQueryUI Autocomplete: how to use 'first-of-type' and 'last-of-type' with #ui-active-menuitem?

    How to apply css class to uploaded image? [closed]

    How to override default styles in GWT 2.3?

    How to get CSS to select ID of specific pattern? [duplicate]

    How to limit click area to text?

    How to use ASP.NET DropDownList in Bootstrap navbar

    How can i reposition a sub ul in a responsive web site

    How do you set a div's location to be centered when we don't know the screen size?

    How to vertically align text to the right of some text using css? [closed]

    Dropdown not showing elements Bootstrap 3

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    jQuery - How to revert css changes when using slideToggle()?

    How to get the navigation element to have horizontal lines after each nav element in css

    how to set a specific pixel or character width limit for a text in css

    How to force the Sass interpreter to output non-css code?

    How to get a property from other class in CSS?

    How to insert instance variable as css rule in Rails?

    How can I center my ul li list in css?

    How to CSS pairs of DIV text left/right of center

    How to get the effect not to add one more div?

    How to use particular CSS styles based on screen size / device

    how can i add extra element style for external css file?

    How do I add a “popup” shadow to an HTML element

    how to prevent vertical Stepdown

    How to make right and bottom css properties work on a textarea in IE? (IE9 and below)

    How to make my right-box float right…?

    How to load different CSS based on the category of the post on WP

    How to access an element's class value via CSS

    css how to float or display two elements of unknown widths next to each other inside a div of unknown width