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

我有一个按钮

#first

，点击后被替换为

#second

。在得到第二个按钮后，如果我刷新页面，我将返回到第一个按钮。如果我想让我的按钮成为第二个按钮，即使在刷新之后，我如何才能做到这一点？ 提前感谢

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#first”）.replace为（'Second Button'）；
});
});
第一按钮

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

示例来自：

您可以将此更改为：

      // 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");
        });
        }

var buttonState=localStorage.getItem（“buttonState”）；
$（document）.ready（函数（）{//on document ready
if（buttonState）{//检查buttonState是否存在
如果（按钮状态==='Second'）{//if按钮状态=Second
//将状态更改为秒的逻辑
$（“#first”）.replace为（'Second Button'）；
}
}
$（“按钮”）。单击（函数（）{
$（“#first”）.replace为（'Second Button'）；
setItem（“buttonState”、“Second”）；
});
}

因此，在您的示例中，如果将状态更改为秒，请将状态保存为about（setItem），然后在document ready或window load上检索该状态

下面是一个it工作的例子：

---

请注意，我已经注释掉了localStorage.clear（）。使用它可以重置本地存储。

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

示例来自：

您可以将此更改为：

      // 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");
        });
        }

var buttonState=localStorage.getItem（“buttonState”）；
$（document）.ready（函数（）{//on document ready
if（buttonState）{//检查buttonState是否存在
如果（按钮状态==='Second'）{//if按钮状态=Second
//将状态更改为秒的逻辑
$（“#first”）.replace为（'Second Button'）；
}
}
$（“按钮”）。单击（函数（）{
$（“#first”）.replace为（'Second Button'）；
setItem（“buttonState”、“Second”）；
});
}

因此，在您的示例中，如果将状态更改为秒，请将状态保存为about（setItem），然后在document ready或window load上检索该状态

下面是一个it工作的例子：

---

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

设置cookie以保持按钮和文档上的状态。准备好了，获取保存的状态并将其显示出来。

设置cookie以保持按钮和文档上的状态。准备好了，获取保存的状态并将其显示出来。

使用本地存储，在窗口加载时，只需从ERE您需要将按钮的状态保存到页面外部。会话存储、本地存储、cookie或通过AJAX的服务器将根据您的需要和可用性工作。使用本地存储和窗口加载只需从中获取按钮状态即可。您需要将按钮的状态保存到外部sessionStorage、localStorage、Cookie或通过AJAX的服务器将根据您的需要和可用性而工作。或者将sessionStorage用作替代品否它必须是第一眼看到的第一个按钮，但在将其状态更改为第二个后（“单击后为”）即使在刷新之后，它也必须保持在该状态…这是我所做的。您在我给出的示例中添加了更多内容。您不应该首先设置按钮状态。您只在单击按钮时设置按钮状态。这是您更新的小提琴，与我所做的一模一样：或者可能将sessionStorage用作替代项否，它必须是中的第一个按钮第一眼看到，但在将其状态更改为“第二”（单击后）后，它必须仅在刷新后保持该状态…这是我所做的您在我给出的示例中添加了更多内容。您不应该首先设置按钮状态。您只在单击按钮时设置它。这是您的更新小提琴，与我所做的完全相同：