Question

我有一个按钮#first，点击后会被#second替换。获得第二个按钮后，如果我刷新页面，我将返回第一个按钮。如果我想让我的按钮成为第二个按钮，即使刷新后如何实现这一目标？提前谢谢

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("button").click(function() {
          $("#first").replaceWith('<button id="second">Second Button</button>');
        });
      });
    </script>
  </head>
  <body>
    <button id="first">firstbutton</button>
  </body>
</html>

Answer 1

设置一个cookie来保持按钮的状态和文件.ready，获取保存的状态并显示它。

Answer 2

使用本地存储，在窗口加载时，只需从那里获取按钮状态。

示例来自：http://www.w3schools.com/html/html5_webstorage.asp

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

您可以将其更改为：

      // Store
      localStorage.setItem("buttonState", "Second");
      // Retrieve
      var buttonState = localStorage.getItem("buttonState");

所以在你的情况下：

      var buttonState = localStorage.getItem("buttonState");   
      $(document).ready(function() { //on document ready
        if(buttonState){ //check if buttonState exists
            if(buttonState === 'Second'){ //if button state = second
              //logic to change state to second
              $("#first").replaceWith('<button id="second">Second Button</button>');
            }
    }
        $("button").click(function() {
          $("#first").replaceWith('<button id="second">Second Button</button>');
          localStorage.setItem("buttonState", "Second");
        });
        }

因此，在您的示例中，如果将状态更改为second，则保存状态（如about（setItem）），然后在文档就绪或窗口加载时检索该状态。

这是一个工作的例子：https://jsfiddle.net/wg7xL4sa/2/

注意我已经注释掉了localStorage.clear（）。使用此选项重置本地存储空间。

刷新时如何防止按钮进入原始状态

2 个答案: