如何防止按钮在刷新时变为原始状态

我有一个按钮#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>

来源

2016-01-28 user3398900

使用本地存储，并在窗口加载只是从那里得到按钮状态 – thatOneGuy

你需要坚持按钮的状态存储在页面的外部。 sessionStorage，localStorage，cookies或通过AJAX的服务器都可以工作，具体取决于你需要和可用的东西。 –

使用本地存储和窗口负载刚刚从那里得到的按钮状态。

来自实例：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"); 
     }); 
     }

在你的榜样

所以，如果你改变状态其次，保存状态（setItem），然后检索文档就绪或窗口加载。

这里是它的工作为例小提琴：https://jsfiddle.net/wg7xL4sa/2/

通知我评论了localStorage.clear（）。使用此来重置您的本地存储。

来源

2016-01-28 10:37:41 thatOneGuy

或者可能使用sessionStorage作为替代 – jsg

没有它的喜欢它一定是第一个按钮，但在将其状态更改为第二个（'点击后'）它只能在刷新后才保持该状态...... https://jsfiddle.net/Goutham_Pratapa/wg7xL4sa/这就是我所做的 – user3398900

你给我给的例子增加了更多。您不应该首先设置按钮状态。您只在点击按钮时设置它。这里是你更新的小提琴完全一样，我做到了：https://jsfiddle.net/wg7xL4sa/1/ – thatOneGuy

设置一个cookie来保存按钮的状态并在document.ready上获取保存的状态并将其显示。

来源

2016-01-28 10:40:51 abhinavchat

如何防止按钮在刷新时变为原始状态

回答

相关问题