如何防止从本地存储加载样式表时呈现css

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

本文关键字：css 样式 加载 何防止 存储      更新时间：2023-09-26

下面的问题-我在本地存储中存储了一个样式表。但是当我尝试从那里加载它时，我使用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()。也许还有另一种方法可以将本地存储中的样式视为纯文本?

你正在调用这个

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

，然后再存储。所以当你通过ajax获取它时，它就在文档上了，然后在其他代码上你再放一次。

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

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

我只是好奇。

相关文章：