js自动刷新当前页面的方法

js自动刷新当前页面的方法
摘要：
1.背景介绍：自动刷新页面的需求
2.方法一：使用JavaScript 定时器
3.方法二：使用jQuery 的ajax 函数
4.方法三：使用HTML5 的HTMLStorage 对象
5.总结和建议
正文：
在网页开发中，我们有时候需要实现自动刷新当前页面的功能。

例如，实时更新数据、定时显示广告等场景。

下面，我们将介绍三种实现自动刷新页面的方法，分别是使用JavaScript 定时器、jQuery 的ajax 函数和HTML5 的HTMLStorage 对象。

方法一：使用JavaScript 定时器
这是一种较为简单的实现方式，通过JavaScript 设置一个定时器，每隔一定时间刷新页面。

以下是具体代码示例：
```javascript
function autoRefresh() {
location.reload();
}
setInterval(autoRefresh, 10000); // 每隔10 秒刷新一次页面
```
方法二：使用jQuery 的ajax 函数
这种方法通过jQuery 的ajax 函数实现异步刷新页面。

在页面加载时，使用ajax 函数请求页面，当收到响应后，使用`location.reload()`刷新页面。

以下是具体代码示例：
```javascript
$(document).ready(function() {
$.ajax({
url: location.href,
success: function() {
location.reload();
}
});
});
```
方法三：使用HTML5 的HTMLStorage 对象
这种方法通过HTML5 的HTMLStorage 对象实现页面刷新。

首先，在页面加载时将当前页面的URL 存储到HTMLStorage 中，然后每隔一定时间，检查URL 是否发生变化。

若发生变化，则执行刷新操作。

以下是具体代码示例：
```javascript
function checkUrl() {
const currentUrl = location.href;
const storedUrl = localStorage.getItem("url");
if (storedUrl!== currentUrl) {
location.reload();
localStorage.setItem("url", currentUrl);
}
}
setInterval(checkUrl, 10000); // 每隔10 秒检查一次URL
```
总结和建议
以上三种方法都可以实现自动刷新页面的功能，但具体使用哪种方法取决于实际需求。

对于实时更新数据的场景，推荐使用jQuery 的ajax 函数或HTML5 的HTMLStorage 对象，因为它们可以实现异步刷新，避免页面闪烁。

而对于定时显示广告等场景，使用JavaScript 定时器较为简单易行。