时间戳

首页 > 解决方案 > 如何在单击按钮时永久更改颜色

javascript - 如何在单击按钮时永久更改颜色

问题描述

我有一个功能可以在单击按钮时更改框的颜色，并且效果很好。我的问题是，当我重新加载页面时，CSS 将恢复为原始框颜色。有没有办法让改变的盒子颜色永久化。即使重新加载页面，更改的颜色也不会恢复。不能使用本地存储和 cookie，因为它们不在设备之间共享。就像在函数changeColor运行时更改整个代码库一样。这可能吗。任何帮助表示赞赏。提前致谢。

function changeColor() {
  document.getElementById("box1").style.backgroundColor = "green";
}
#box1 {
  width: 150px;
  height: 150px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
}

.button1 {
  position: absolute;
  top: 10px;
  left: 200px;
}
<div id="box1"></div>
<button class="button1" onclick="changeColor()">Change color</button>

标签： javascripthtmlcss

解决方案

使用这个功能

1.用key backgroundColor 存储颜色值

localStorage.setItem("backgroundColor","red");

2.从本地存储访问它

localStorage.getItem("backgroundColor");

3.清除本地存储（需要时可选）

localStorage.clear();

现在您可以从本地存储访问颜色。

推荐阅读