Javascript 在本地存储器上保存按钮颜色_Javascript_Html_Jquery_Css

Javascript 在本地存储器上保存按钮颜色

javascript html jquery css

Javascript 在本地存储器上保存按钮颜色,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我对网络开发很陌生。我见过类似的问题，但这对我没有帮助我有一个按钮，当我按下它时它会变成绿色。但是当页面刷新时，颜色就会消失。我知道本地存储是一种解决方案，但我不知道如何实现它。我曾多次尝试使用本地存储，但都没有找到解决方案。我已经在下面发布了我的HTML代码。请注意，我的按钮位于表单中，因为我需要从按钮访问链接。如何使用本地存储保存按钮颜色，以便页面刷新时颜色不会消失。如果我按下第二个按钮，我希望颜色从第一个按钮消失，这样只有第二个按钮是活动的。非常感谢您的帮助。在我的代码上做的任何例子都会

我对网络开发很陌生。我见过类似的问题，但这对我没有帮助

我有一个按钮，当我按下它时它会变成绿色。但是当页面刷新时，颜色就会消失。我知道本地存储是一种解决方案，但我不知道如何实现它。我曾多次尝试使用本地存储，但都没有找到解决方案。我已经在下面发布了我的HTML代码。请注意，我的按钮位于表单中，因为我需要从按钮访问链接。如何使用本地存储保存按钮颜色，以便页面刷新时颜色不会消失。如果我按下第二个按钮，我希望颜色从第一个按钮消失，这样只有第二个按钮是活动的。非常感谢您的帮助。在我的代码上做的任何例子都会有帮助！！非常感谢您抽出时间

HTML code

<!DOCTYPE html>
<html lang="en">
<head>

<style>
.button {

box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
margin-top: 280px; 
margin-left: 420px;    
background-color:rgb(128, 128, 128); 

  border: none;
  color: white;
  padding: 30px 35px;
  
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.4s;
}

.button:focus{

background-color:rgba(10, 170, 10, 0.952);
}

</style>
</head>


<body>

  <div style = "position:fixed; left:-300px; top:-100px;">


<form method="get" action="http://1.1.1.1/myfile.php" >
<button class="button">Lights On</button>
</form>

</div>
</body>
</html>

HTML代码
.按钮{
盒影：-2px 2px白杏仁，-1px 1px橙色，-1px 1px橙色；
边缘顶部：280px；
左边距：420px；
背景色：rgb（128、128、128）；
边界：无；
颜色：白色；
填充：30px 35px；
文字装饰：无；
显示：内联块；
字体大小：16px；
过渡时间：0.4s；
}
.按钮：焦点{
背景色：rgba（10170,10,0.952）；
}
开灯

您可以使用

localStorage.setItem（key，value）

和

localStorage.getItem（key）

。下面是一个示例，该示例将事件处理程序添加到表单中，以保存按下按钮的localStorage，并在页面加载时，如果发现localStorage指示器，则将其标记为绿色：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    .button {
      box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
      margin-top: 280px; 
      margin-left: 420px;    
      background-color:rgb(128, 128, 128); 

      border: none;
      color: white;
      padding: 30px 35px;

      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      transition-duration: 0.4s;
    }

    .button-green, .button:focus {
      background-color:rgba(10, 170, 10, 0.952);
    }
  </style>
</head>
<body>
  <div style = "position:fixed; left:-300px; top:-100px;">
    <form id="form" method="get" action="https://1.1.1.1/myfile.php" >
      <button class="button">Lights On</button>
    </form>
    
    <script>
        if (localStorage.getItem('formSubmitted') === 'yes') {
            for(const button of document.getElementsByClassName('button')) {
                button.classList.add('button-green')
            }
        }
        document.getElementById('form').addEventListener('submit', (event) => {
            localStorage.setItem('formSubmitted', 'yes');
        })
    </script>
  </div>
</body>
</html>


.按钮{
盒影：-2px 2px白杏仁，-1px 1px橙色，-1px 1px橙色；
边缘顶部：280px；
左边距：420px；
背景色：rgb（128、128、128）；
边界：无；
颜色：白色；
填充：30px 35px；
文字装饰：无；
显示：内联块；
字体大小：16px；
过渡时间：0.4s；
}
.按钮绿色，.按钮：焦点{
背景色：rgba（10170,10,0.952）；
}
开灯
if（localStorage.getItem（'formSubmitted'）=='yes'）{
for（document.getElementsByClassName（'button'）的const按钮）{
button.classList.add（'button-green'）
}
}
document.getElementById（'form'）。addEventListener（'submit'，（事件）=>{
setItem（'formSubmitted'，'yes'）；
})

Hey@Ezekiel Elin。我试过密码。当我按下按钮时，请求会传递到服务器，但现在的问题是当我添加另一个名为“lights off”的按钮时，当按下一个按钮时，两个按钮都是绿色的。我希望当按下另一个按钮时，一个按钮的颜色会改变。非常感谢！！！您需要根据按下的按钮在localStorage中设置不同的值，并在重新加载页面时适当地检查每个值。在这种情况下，您还需要为每个按钮指定一个唯一的ID，并执行

document.getElementById（'button-ID'）.classList.add（'button-green'）

，以便它只适用于一个按钮。Hey@Ezekial Elin。我试过了，但没能成功。颜色仍然保留在按钮2中。你能告诉我它是怎么工作的吗我不知道哪里出了问题。