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..

    Bootstrap How to make a responsive grid degradating in two steps?

    Adding a description to a css image slideshow

    How to show div property that is in a class with javascript

    How to accomplish this layout with CSS and HTML?

    How can I increase space just above the footer line?

    How to use CSS function instead of LESS function?

    CSS Layout. Can not get idea how to fix it

    How can I align my HTML components with CSS?

    How can I get these span elements to expand to fill their full height?

    How to use a CSS for only one div and not the rest of the code?

    How can I get IE8 to accept a css :before tag?

    How to remove scroll bar using overflow CSS HTML (Possible Positioning Conflict)

    How to I make a button clickable with HTML/CSS? It needs to be centered along with a title over an image

    How to make floated columns stretch to fill container vertically?

    how to make
  • add css class active after refreshing page?
  • How do I fix a Wordpress meta box that's blown out by it's content?

    How can I align to center floated divs?

    How to change the background color of an input field when text is entered?

    css how to remove the empty space at the left

    how to make a box of nxn given in a url?

    how to fix height:auto css

    How to give equal width for all the fields in the form with validations?

    how to add classes to the dropdown menu in the TinyMCE table editor

    CSS How to make a DIV that starts 100px from the top reach the bottom of the page

    How to set a background-color to element which has the same id with anchor of url?

    How can i enlarge wesite font-size when used with vw unit for WCAG (accessibility) propeses?

    How to vertically align inline-block elements with height set and test with browser tools

    How to get CSS property value from HTML using generalistic JavaScript function
    When you use window.getComputedStyle the method directly return the style attribute calculated of your object. you can access directly the css attribute in the rreturn object. So to solve your...
    Read more

    How to make a caret in a link change color when the LINK is hovered over?

    How to store “state” in CSS only?