user2718671 user2718671 - 1 month ago 11
jQuery Question

How to prevent rendering css when loading stylesheet from local storage?

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?

Answer

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.