刷新页面时，应用到静态值的 CSS 样式消失。我们怎样才能防止这种情况发生？答案

【问题标题】：On refreshing the page, applied CSS style to the static value disappears. How can we prevent this?刷新页面时，应用到静态值的 CSS 样式消失。我们怎样才能防止这种情况发生？
【发布时间】：2023-03-05 21:59:01
【问题描述】：

我正在使用纯 javascript 和 CSS 显示一个静态值和一个按钮。我编写代码的方式是，在单击按钮时，静态值的颜色变为红色。这里的问题是，当我刷新页面时，静态值的红色消失。即使在刷新页面后，我也希望静态值是红色的。有什么建议可以实现吗？

function fn1() {
  var v1 = document.getElementsByClassName("class1");
  var data = 0;
  data = v1[0].innerHTML;
  if (data >= 0) {
    v1[0].innerHTML = "$" + (Math.round(Math.abs(data) * 100) / 100).toFixed(2);
  } else if (data < 0) {
    v1[0].innerHTML = "-$" + (Math.round(Math.abs(data) * 100) / 100).toFixed(2);
    v1[0].style.color = "red";
  }
}

<html>
<head>
  <body>
    value :
    <h2 class="class1"> -100</h2><br><br>
    <!-- on click of button call function -->
    <button onclick="fn1()">CLICK</button>
    <!--<a href="javascript:location.reload(true)" onclick="fn1()">Refresh Page</a>          -->
  </body>
</head>
</html>

【问题讨论】：

当前 o/p：单击按钮时，红色静态值为 -$100.00，但在页面刷新时，o/p 为黑色 -100。预期的 o/p：页面刷新后，o/p 应该是 -$100.00 红色。
使用会话/本地存储。

标签： javascript css

【解决方案1】：

您可以使用任何 cookie、localStorage 或 sessionStorage 来解决此问题。现在我使用 localStorage 来存储最新的 CSS 样式颜色。更新后的代码如下

<html>
    <head>
    </head>
    <body>
        value : <h2 class="class1"> -100</h2><br><br>
        <!-- on click of button call function -->
        <button onclick="fn1()">CLICK</button>
        <!--<a href="javascript:location.reload(true)" onclick="fn1()">Refresh Page</a>          -->
    </body>

    </html>
    <script type="text/javascript">
    var v1 = document.getElementsByClassName("class1");
        function fn1() {


            var v1 = document.getElementsByClassName("class1");
            var data = 0;
            data = v1[0].innerHTML;
            if (data >= 0) {

                v1[0].innerHTML = "$" + (Math.round(Math.abs(data) * 100) / 100).toFixed(2);

            } else if (data < 0) {

                v1[0].innerHTML = "-$" + (Math.round(Math.abs(data) * 100) / 100).toFixed(2);
                //setting color in local storage
                window.localStorage.setItem('color','red');
                v1[0].style.color = "red";

            }
        }
        //getting color from local storage
        v1[0].style.color = window.localStorage.getItem('color');

    </script>

注意：不要忘记根据您的使用将颜色从红色重置为黑色，否则一旦将颜色设置为红色，它将始终显示为红色。

【讨论】：

【解决方案2】：

    color = localStorage.getItem("color")
    if(color){
        document.getElementById("class1").style.color = color;
    }
function fn1() {
  var v1 = document.getElementsByClassName("class1");
  var data = 0;
  data = v1[0].innerHTML;
  if (data >= 0) {
    v1[0].innerHTML = "$" + (Math.round(Math.abs(data) * 100) / 100).toFixed(2);
  } else if (data < 0) {
    v1[0].innerHTML = "-$" + (Math.round(Math.abs(data) * 100) / 100).toFixed(2);
    v1[0].style.color = "red";
    cc = window.localStorage.setItem("color", "red")
  }
}

<html>
<head>
  <body>
    value :
    <h2 class="class1" id="class1"> -100</h2><br><br>
    <!-- on click of button call function -->
    <button onclick="fn1()">CLICK</button>
    <!--<a href="javascript:location.reload(true)" onclick="fn1()">Refresh Page</a>          -->
  </body>
</head>
</html>

【讨论】：

【解决方案3】：

你可以试试localStorage:

JAVASCRIPT：

function fn1() {
  var v1 = document.getElementsByClassName("class1");
  var data = 0;
  data = v1[0].innerHTML;
  if (data >= 0) {
    v1[0].innerHTML = "$" + (Math.round(Math.abs(data) * 100) / 100).toFixed(2);
  } else if (data < 0) {
    v1[0].innerHTML = "-$" + (Math.round(Math.abs(data) * 100) / 100).toFixed(2);
    v1[0].style.color = "red";
    setLocalStorageItem()
  }
}

document.getElementById('btn1').addEventListener('click', function(e) {
  fn1()
})

setColorOnLoad()

function setColorOnLoad() {
  if (localStorage.getItem('static') === true) {
    fn1()
  }
}

function setLocalStorageItem() {
  localStorage.setItem('static', true)
}

HTML：

value :
<h2 class="class1"> -100</h2><br><br>
<!-- on click of button call function -->
<button id="btn1">CLICK</button>
<!--<a href="javascript:location.reload(true)" onclick="fn1()">Refresh Page</a>          -->

在 HTML 中使用 onclick 不是一个好习惯，而是在 JS 中添加一个 ID 和一个 eventListener。

我还建议您根据应用程序的状态在 localStorage 中设置名称，而不是属性。大多数时候你不希望它是“红色的”，而是表明它有一个特殊的状态（比如“静态”）。如果您将 localStorage 设置为“颜色：红色”，并且您想在将来更改它（例如“绿色”），那么您将有两件事要寻找。如果您将 localStorage 项设置为“static: true”，那么它是绿色、红色、下划线还是隐藏都无关紧要 - 您只需在代码中的一处更改格式。

【讨论】：