Question

导航到下一页然后单击Edge（MS）浏览器的后退按钮时，复选框按钮状态存在问题。

在寻找有关此问题的信息时，我遇到了这个bug report。自2015年以来，它没有更新。迄今为止，此问题是否有任何解决方法？

用例如下；

用户访问页面
勾选复选框或单选按钮
导航到另一个页面（通过地址栏或通过标签单击链接）
一旦加载了另一页，请单击Edge的后退按钮（或Alt +左箭头）
复选框或单选按钮的先前状态/值必须保留或保留。

现在，通过Edge的“后退”按钮导航回页面时，状态/值将被清除。

Answer 1

是的，如果没有在Edge浏览器中保留复选框或单选按钮，则我会重现该问题，即状态/值。这是一个已知问题，我已将此问题反馈给Edge Platform。

作为一种解决方法，我建议您尝试使用Web Storage（例如：本地存储或会话存储）存储状态/值，然后重新加载页面，重置这些状态/值。

代码如下：

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function myfunction() {
            //check whether the browser support storage
            if (typeof (Storage) !== "undefined") {
                // Code for localStorage/sessionStorage.

                if (sessionStorage.checkboxstatus) {
                    document.getElementById("Checkbox1").checked = true;
                }
                else {
                    document.getElementById("Checkbox1").checked = false;
                }

                if (sessionStorage.radiostatus) {
                    document.getElementById("Radio1").checked = true;
                }
                else {
                    document.getElementById("Radio1").checked = false;
                }

                //checkbox click event: use session storage to store the state
                document.getElementById("Checkbox1").addEventListener("click", function () {
                    if (document.getElementById("Checkbox1").checked) {
                        sessionStorage.checkboxstatus = true;
                    }
                    else {
                        sessionStorage.checkboxstatus = false;
                    }
                });
                //radio button click event: to store the state.
                document.getElementById("Radio1").addEventListener("click", function () {
                    if (document.getElementById("Radio1").checked) {
                        sessionStorage.radiostatus = true;
                    }
                    else {
                        sessionStorage.radiostatus = false;
                    }
                });
            } else {
                // Sorry! No Web Storage support..
                alert("No web storage support");
            }
        };
    </script>
</head>
<body onload="myfunction();">
    <input id="Checkbox1" type="checkbox" />
    <input id="Radio1" type="radio" />
    <a href="/HtmlPage2.html">Link</a>
</body>

结果如下：

单击浏览器的后退按钮时，单选按钮和复选框按钮状态被清除

1 个答案: