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

    jQuery & CSS - How to stop a relative element from floating left and right (when you're scrolling)?

    How to adjust the height of the footer automatically

    How to apply css for a class within h2?

    How to make parent fullscreen div to grow with absolutely positioned child using CSS and jeet?

    How to move some text down in a li tag?

    How to Change the hover image in CSS

    How to Change main menu color?

    How to ignore white spaces in between tags, CSS, PHP

    How do I have fieldset::before rule account for the legend?

    How do I get this div to cover flash control (jw player)?

    How to link assets which are inside of module in Laravel?

    how to add css on click and remove it when they click close button [closed]

    How do I display div's next to each other within a wrapper div?

    how to stretch an image in background css property

    How can I add my own CSS styles to CKEditor

    How to make CSS (or JS?) hideable help bar

    How to align radio buttons with labels in one line? [duplicate]

    How to make an invisible character in HTML, that still get's picked up on text selection?

    How to style the entire first row of a table in css

    how to get image to show up to the left of panel (both in same row)

    How to create a “dot-dash” border with css or javascript?

    How to apply a complex style to the selection of a Select2 component?

    How can I turn off hardware acceleration for certain HTML elements via CSS?

    How to position button in the middle

    How to set two floated divs to be the 100% height of the page

    CSS Media Queries: How to make the right column display above the left on small screens?

    How to achieve a lightbox effect with css only? Example available

    How to simplify CSS code

    How to make background scale from center outwards with CSS transition

    How to make rotating shape look thick?