使用jQuery重新加载页面后如何保存CSS值？

我在我的网站上有一个简单的语言下拉列表，可以更改iframe中的语言。 问题是，每当我切换到iframe中的下一页时，该语言都会设置回其默认值，即使下拉列表仍在另一种语言上

HTML:

iFrame中的CSS：

.english{
    display: unset;}
.german{
    display: none;}

jQuery：

$(document).ready(function() {
    $( "#language_Dropdown" ).change(function() {
        var option = $("#language_Dropdown").val();
        if (option == "english") {
            $( "#checkbox_English" ).prop( "checked", true );
            $( "#checkbox_German" ).prop( "checked", false );
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "unset");
            iFrame.find(".german").css("display", "none");
        }
        else if (option == "german"){
            $( "#checkbox_English" ).prop( "checked", false );
            $( "#checkbox_German" ).prop( "checked", true );
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "none");
            iFrame.find(".german").css("display", "unset");
        }
    });
});

我读过我必须使用cookies来实现这一点，但我对jQuery非常陌生，我查找的大多数解决方案都非常先进。。。

---

有没有更简单的方法，只需在我的代码中添加一些东西就可以使其正常工作，还是我完全走错了方向？

感谢所有的回复

我查阅了04FS提到的load方法，发现了一些适合我的方法

以下是添加的代码：

$(document).ready(function() {
    $("#iFrame_Content").on( "load", function() {
        var option = $("#language_Dropdown").val();
        if (option == "english") {
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "unset");
            iFrame.find(".german").css("display", "none");
        }
        else if (option == "german") {
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "none");
            iFrame.find(".german").css("display", "unset");
        }
    });
});

---

iframe的URL是什么？您可能需要使用以下查询参数打开iframe：<代码>http://www.iframe.com?lang=eng欢迎来到堆栈溢出。如果这些都在同一个域下，则可以使用浏览器Cookie to LocalStorage变量执行此操作。问题是您希望浏览器存储首选项的时间有多长。您还可以编写一些方便的函数，使添加和读取cookie变得更容易。请看这里：您正在使用

iframe进入iframe文档。查找
可直接操作其中元素的显示属性（您甚至没有使用标题中提到的类，您正在设置内联样式）-因此，当iframe中的文档完全被导航到新文档所取代时，所有这些都会丢失。您必须通过iframe的
load
事件来处理这个问题，以重复相同的过程-从父文档，或者从加载到其中的（新）文档内部。但是使用iframe有很多问题（可用性、SEO等等），我不认为有必要深入研究以上内容——你应该改变整个方法。研究服务器端技术，而不是客户端技术。（对于SEO来说，这里特别糟糕的可能不仅仅是iFrame本身的使用，而是在同一个文档中有两个语言版本。您可以/应该在适当的元素上都有一个适当的
lang
set属性，但是在第一个页面中，最好是每个语言单独的文档。）e、 )
$(document).ready(function() {
    $( "#language_Dropdown" ).change(function() {
        var option = $("#language_Dropdown").val();
        if (option == "english") {
            $( "#checkbox_English" ).prop( "checked", true );
            $( "#checkbox_German" ).prop( "checked", false );
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "unset");
            iFrame.find(".german").css("display", "none");
        }
        else if (option == "german"){
            $( "#checkbox_English" ).prop( "checked", false );
            $( "#checkbox_German" ).prop( "checked", true );
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "none");
            iFrame.find(".german").css("display", "unset");
        }
    });
});

$(document).ready(function() {
    $("#iFrame_Content").on( "load", function() {
        var option = $("#language_Dropdown").val();
        if (option == "english") {
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "unset");
            iFrame.find(".german").css("display", "none");
        }
        else if (option == "german") {
            var iFrame = $("#iFrame_Content").contents();
            iFrame.find(".english").css("display", "none");
            iFrame.find(".german").css("display", "unset");
        }
    });
});