当我们转到某个页面并使用浏览器后退按钮返回当前页面时，Microsoft Edge 复选框值不会持续存在？

Question

如果我们选中复选框并转到某处并使用浏览器后退按钮返回，值将正确保留在（IE、FF 和 Chrome）中。但在 Microsoft Edge 中，复选框值不会持久化。

将以下内容保存为 1.html 和 2.html 文件。

我想使用 Microsoft Edge，即使在转到下一页并返回当前页面后，复选框值（已选中）仍应保留。

1.html 文件。

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form action="2.html">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" autocomplete="on">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" class="form-control" id="remember" name="remember" autocomplete="on"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

和2.html文件

<html>
<body>Testing browser back button and state of the checkbox value</body>
</html>

Answer 1

是的，这是 Edge 中的一个已知问题。我这边的情况也是一样的，我也找了一个bug report. If you want to persist the value of checkbox in Edge, you can use Web Storage来存放state/value。

您可以在 1.html 中添加此脚本：

<script>
    function myfunction() {
            //check whether the browser support storage
            if (typeof (Storage) !== "undefined") {
                // Code for localStorage/sessionStorage.

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

                //checkbox click event: use session storage to store the state
                document.getElementById("remember").addEventListener("click", function () {
                    if (document.getElementById("remember").checked) {
                        sessionStorage.checkboxstatus = true;
                    }
                    else {
                        sessionStorage.checkboxstatus = false;
                    }
                });

            } else {
                // Sorry! No Web Storage support..
                alert("No web storage support");
            }
        };
</script>

然后在<body>标签中添加onload="myfunction();"。结果是这样的：

当我们转到某个页面并使用浏览器后退按钮返回当前页面时，Microsoft Edge 复选框值不会持续存在？

Microsoft Edge check box values are not persisting when if we go some page and come-back to current page by using the browser back button?

checkbox

autocomplete

microsoft-edge