如何使用 navigator.onLine 属性？

推荐答案

if (navigator.onLine) {
  console.log('在线');
} else {
  console.log('离线');
}

本题详细解读

1. navigator.onLine 属性简介

navigator.onLine 是浏览器提供的一个布尔值属性，用于检测当前设备是否连接到网络。如果设备在线，navigator.onLine 返回 true；如果设备离线，则返回 false。

2. 使用场景

• 在线/离线状态检测：在需要根据网络状态调整应用行为的场景中，可以使用 navigator.onLine 来检测当前网络状态。
• 离线模式处理：当用户处于离线状态时，可以提示用户或切换到离线模式。

3. 示例代码

window.addEventListener('online', () => {
  console.log('设备已连接到网络');
});

window.addEventListener('offline', () => {
  console.log('设备已断开网络');
});

4. 注意事项

• 浏览器兼容性：navigator.onLine 在现代浏览器中广泛支持，但在某些旧版浏览器中可能不支持。
• 网络状态变化：可以通过监听 online 和 offline 事件来实时响应网络状态的变化。

5. 实际应用

在实际应用中，navigator.onLine 通常用于以下场景：

• 缓存数据同步：在设备重新连接到网络时，同步本地缓存的数据。
• 用户提示：在用户离线时，显示提示信息或禁用某些功能。