javascript - 从本地存储加载样式表时如何防止渲染 css？

Question

以下问题 - 我在本地存储中存储了一个样式表。但是当我尝试从那里加载它时，我使用 JSON.parse() 并且浏览器似乎已经呈现 CSS。但我更希望浏览器将解析后的 CSS 视为文本，然后将文本附加到样式标签。

代码:

从服务器加载样式表并将其存储在本地存储

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);
            }
        }); 
    }

在另一个函数中，如果设置了样式，则应从本地存储加载样式:

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

即使我省略了带有创建的样式标签的行，也会呈现 css。通过这一行，我看到如果我检查一个元素，元素样式会在开发人员工具栏中出现两次。那么如何在使用 JSON.parse() 时阻止浏览器呈现样式。也许还有另一种方法可以将本地存储中的样式视为纯文本？

Answer 1

你在调用这个

$('<style>').attr('id', 'my_style').text(res).prependTo('#my_div');   

存储之前。因此，一旦您通过 ajax 获取它，它就会出现在文档中，然后您只需再次将它放在其他代码中。