• HTML5在线状态检测和DOM Storage


    除了离线资源缓存外,html5离线应用开发还可能用到以下技术

    在线状态检测

    navigator.onLine

    navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线;如果为 false, 表示离线。当网络状态发生变化时,navigator.onLine 的值也随之变化。开发者可以通过读取它的值获取网络状态。

    online/offline 事件

    当开发离线应用时,通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知,因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时,online/offline 事件就会被出发。因此,开发者可以通过监听它们的 online/offline 事件来获悉网络状态。

    下面是一个实例:

    <!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    </head>
    
    <body>
    <script type="text/javascript">
    var updateLineStatus = function(event){
        if(navigator.onLine){
            alert('您目前在线');
        }else{
            alert('您目前离线');
        };
    };
    window.addEventListener('online', updateLineStatus, false);
    window.addEventListener('offline', updateLineStatus, false); 
    
    /*
    在这里提一下,网上看到有的文章是这样绑定online/offline事件的
    document.body.addEventListener('online', updateLineStatus, false);
    但我经过测试,在Chrome,是无法触发事件的,必须要像我上面的写法才能触发
    其他浏览器暂未测试
    */
    </script>
    </body>
    </html>

    DOM Storage

    DOM Storage 分为两类:sessionStorage 和 localStorage。它们就一个地方不同,sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时, 之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话。

    DOM Storage 的常用方法(sessionStorage 和 localStorage 通用):

    getItem(key);  //获取信息

    setItem(key, value);  //设置信息

    removeItem(key);  //删除信息

    下面是看一个例子:

    <!DOCTYPE HTML> 
    <html> 
    <body> 
    <script> 
    // 在 sessionStorage 中定义'userName'变量
    sessionStorage.setItem('userName', 'developerworks');       
    // 访问'userName'变量
    alert("Your user is: " + sessionStorage.getItem('userName')); 
    // 最后删除'userName'
    sessionStorage.removeItem('userName');                       
    </script> 
    </body> 
    </html>




  • 相关阅读:
    Linux——k8s命令别名修改
    k8s—centos7安装部署NFS服务器和客户端及基于nfs的动态存储storageclass使用总结
    MySQL—用户和权限管控
    MySQL—常用SQL语句整理总结
    Zookeeper——入门介绍(相关原理、安装启动及使用操作)
    SpringBoot——Quartz定时框架的使用详解和总结
    SpringBoot——@Scheduled的自定义周期性线程池解决任务延时执行问题
    Linux—用户新建目录和文件的默认权限设置:umask详解
    设计模式——单例模式详解
    Linux—CPU核数、上下文切换介绍及pidstat等命令详解
  • 原文地址:https://www.cnblogs.com/czf-zone/p/3603915.html
Copyright © 2020-2023  润新知