Question

我是StackOverflow和PHP的新手。

在我的网站上，如果您按下它们，我会有一个表单和一些可以改变颜色的按钮。它们通过以下代码通过JS改变颜色：

function toggleUsed(selector){
document.querySelector(selector).addEventListener("click", function(){
document.querySelector(selector).classList.toggle("btn-secondary");
document.querySelector(selector).classList.toggle("btn-success");
}); }

但是，当我提交表单时，颜色会被删除。如何使用会话/或类似/来存储页面到页面的按钮状态信息？

这是按钮代码：

<button type="button" class="btn btn-secondary" id="moneyOne">Argument 1</button>

他们看起来像这样 image

Answer 1

如果您需要存储javascript的值，可以使用localStorage。

以下是来自w3schools的HTML5网络存储的一个非常好的示例：

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

存储按钮的状态

1 个答案: