从本地存储加载样式表时如何防止呈现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

很抱歉在这里写，因为我没有足够的代表发表评论我在这里写下来。

我只是想知道您为什么要从本地存储中加载样式表。我们已经有一个浏览器缓存。那么使用本地存储的好处/目的是什么？

我只是好奇。

Answer 2

你叫这个

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

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