jQuery 如何在页面刷新后保持 JavaScript 变量的值

在本文中，我们将介绍如何使用 jQuery 在页面刷新后保持 JavaScript 变量的值。页面刷新后，JavaScript 变量的值将会被重置，这对于一些需要在页面刷新后保持数据的应用程序来说是一个常见的问题。幸运的是，使用 jQuery，我们可以利用浏览器的本地存储功能来解决这个问题。

阅读更多：jQuery 教程

使用本地存储保持变量的值

在 jQuery 中，可以使用 localStorage 对象来访问浏览器的本地存储。localStorage 提供了一种简单的方式来存储和获取数据，并且可以在页面刷新后仍然保持数据的值。

要使用 localStorage，首先需要检查浏览器是否支持该功能。可以使用以下代码来检测：

if (typeof(Storage) !== "undefined") {
  // 浏览器支持本地存储
} else {
  // 浏览器不支持本地存储
}

一旦确认浏览器支持本地存储，就可以使用 localStorage 来存储和获取变量的值。假设我们要保持一个名为 “username” 的变量的值，可以使用以下代码设置变量的值：

localStorage.setItem("username", "John");

要获取变量的值，可以使用以下代码：

var username = localStorage.getItem("username");

通过以上方法，即使在页面刷新后，”username” 变量的值仍然可以被保持。

示例：保持计数器的值

下面是一个示例，演示如何使用 jQuery 在页面刷新后保持计数器的值：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>计数器应用</h1>
  <p id="counter">0</p>

  <script>
    // 在页面加载时检查是否有存储的计数器值
     $(document).ready(function() { if (typeof(Storage) !== "undefined") { var count = localStorage.getItem("counter"); if (count) {$ ("#counter").text(count);
        }
      }
    });

    // 点击按钮时增加计数器的值，并存储到本地存储
     $("button").click(function() { var count = parseInt($ ("#counter").text()) + 1;
      $("#counter").text(count);
      localStorage.setItem("counter", count);
    });
  </script>

  <button>增加计数器</button>
</body>
</html>

在上面的示例中，我们创建了一个简单的计数器应用。每次点击按钮时，计数器的值会增加，并且使用 localStorage 将最新的计数器值存储起来。在页面刷新后，计数器的值会被恢复，并显示出来。