正文

揭秘JS：轻松判断网页首次加载，告别重复操作烦恼

/0 浏览量
0329

在开发网页应用时，我们经常会遇到需要判断网页是否是首次加载的场景。例如，我们可能希望只在首次加载时显示欢迎信息，或者在首次加载时执行一些初始化操作。JavaScript 提供了多种方法可以帮助我们实现这一功能。本文将详细介绍如何利用 JavaScript 判断网页是否是首次加载，并提供一些实用的代码示例。

一、使用 localStorage 判断

localStorage 是 Web Storage API 的一部分，它允许我们在用户的浏览器中存储数据。我们可以利用 localStorage 来判断网页是否是首次加载。

1.1 设置标记

在页面加载时，我们可以在 localStorage 中设置一个标记，例如 isFirstLoad。如果页面是首次加载，则设置该标记为 true；否则，设置为 false。

if (localStorage.getItem('isFirstLoad') === null) {
  localStorage.setItem('isFirstLoad', 'true');
}

1.2 检查标记

在需要判断是否是首次加载的代码块中，我们可以检查 localStorage 中的 isFirstLoad 标记。

if (localStorage.getItem('isFirstLoad') === 'true') {
  // 执行首次加载的代码
  localStorage.setItem('isFirstLoad', 'false');
}

1.3 示例

以下是一个简单的示例，展示如何在首次加载时显示欢迎信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>首次加载示例</title>
</head>
<body>
  <h1 id="welcome">欢迎来到我的网站！</h1>
  <script>
    if (localStorage.getItem('isFirstLoad') === 'true') {
      document.getElementById('welcome').style.display = 'block';
      localStorage.setItem('isFirstLoad', 'false');
    }
  </script>
</body>
</html>

二、使用 sessionStorage 判断

sessionStorage 与 localStorage 类似，但它的数据只在当前会话中有效，即关闭浏览器窗口后数据会被清除。

2.1 使用方法

与 localStorage 类似，我们可以使用 sessionStorage 来设置和检查标记。

if (sessionStorage.getItem('isFirstLoad') === null) {
  sessionStorage.setItem('isFirstLoad', 'true');
}

2.2 示例

以下是一个使用 sessionStorage 的示例，展示如何在当前会话中首次加载时显示欢迎信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>当前会话首次加载示例</title>
</head>
<body>
  <h1 id="welcome">欢迎来到我的网站！</h1>
  <script>
    if (sessionStorage.getItem('isFirstLoad') === 'true') {
      document.getElementById('welcome').style.display = 'block';
      sessionStorage.setItem('isFirstLoad', 'false');
    }
  </script>
</body>
</html>

三、使用 window 对象的 load 事件

window 对象的 load 事件在页面完全加载完成后触发，包括所有的依赖资源（如图片、样式表和框架）。我们可以在这个事件中执行首次加载的代码。

3.1 使用方法

在 load 事件的回调函数中，我们可以检查是否是首次加载。

window.onload = function() {
  if (localStorage.getItem('isFirstLoad') === 'true') {
    // 执行首次加载的代码
    localStorage.setItem('isFirstLoad', 'false');
  }
};

3.2 示例

以下是一个使用 load 事件的示例，展示如何在页面完全加载完成后执行首次加载的代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面加载完成示例</title>
</head>
<body>
  <h1 id="welcome">欢迎来到我的网站！</h1>
  <script>
    window.onload = function() {
      if (localStorage.getItem('isFirstLoad') === 'true') {
        document.getElementById('welcome').style.display = 'block';
        localStorage.setItem('isFirstLoad', 'false');
      }
    };
  </script>
</body>
</html>

四、总结

本文介绍了三种方法来利用 JavaScript 判断网页是否是首次加载。通过使用 localStorage、sessionStorage 和 window 对象的 load 事件，我们可以轻松实现这一功能。选择合适的方法取决于具体的应用场景和需求。希望本文能帮助您解决相关烦恼。

-- 展开阅读全文 --