HTML5地理位置定位功能、HTML5桌面提醒功能、HTML5本地存储之数据库、HTML5离线存储

1.HTML5地理位置定位功能

if(navigator.geolocation){
     navigator.geolocation.getCurrentPosition(
         function success(position){
             console.log('经度：',position.coords.longitude);
             console.log('纬度：',position.coords.latitude);
           //   如果想要根据经纬度在地图上显示，参考http://lbsyun.baidu.com/index.php?title=jspopular3.0
         },
        function error(error){
             console.log('错误代码：',error.code);
             console.log('错误信息：',error.message);
         },
         {
           enableHighAccuracy: true,       //  是否允许使用高精度
           maximumAge        : 30000,     // 是指缓存的时间
           timeout           : 27000  // 指定的超时时间
           }
     );
  } else {
      alert('你的浏览器不支持此功能');
  }

2.HTML5桌面提醒功能

	/*
        'default':推送功能默认关闭
        'granted':推送功能为开启状态(用户点击允许后的状态)
        'denied':为用户点击了禁用(拒绝打开推送功能)
    */
    if(window.Notification.permission == 'default'){
        // 如果用户没有开启，让用户去开启
        window.Notification.requestPermission((status)=>{
            console.log('status:',status);  // 获取用户选择之后是开启还是关闭的状态
            if (status == 'granted') {   // 如果用户同意就推送信息
                let option={
                    body:'王清是世界上最帅的男人',   // 推送信息的内容
                    icon:'./1.jpg'  // 推送信息时展现的图标
                }
                let notify = new Notification('王清帅不帅？',option);
                
                // 推送展现的时候触发的方法
                notify.onshow = ()=>{
                    console.log('提示框展示了');
                }

                // 点击消息框触发的事件
                notify.onclick = ()=>{
                    console.log('点击消息框了');
                    setTimeout(() => {
                        notify.close();  // 关闭消息框                        
                    }, 200);
                }

                // 消息弹框关闭的时候触发的事件
                notify.onclose=()=>{
                    console.log('消息弹框关闭了');
                }

                // 出错的时候触发的事件
                notify.onerror=()=>{
                    console.log('报错啦');
                }
            }
        });
    }

3.HTML5本地存储之数据库

    /* Web SQL最核心的三个方法
        1.openDatabase: 这个方法使用现有的数据库或创建新数据库创建数据库对象
        2.transaction: 这个方法允许我们根据情况控制事务提交或回滚
        3.executeSql:这个方法用于执行真实的SQL语句
    */
    if (window.openDatabase) {
        /*
            参数：数据库名称，版本号，描述文本，数据库大小，创建数据库之后的回调
        */
        let dataBase = openDatabase('student','1.0','my first webSQL',2*1024*1024,(result)=>{
            console.log('创建数据库后的结果：',result);
        });
        console.log('dataBase',dataBase);
        
        dataBase.transaction((fx)=>{
            // 创建stu表
            fx.executeSql(
                'create table if not exists stu (id UNIQUE,name TEXT)',
                [],
                ()=>{
                    console.log('stu表创建成功');
                },
                ()=>{
                    console.log('stu表创建失败');
                }
            ),
            // 插入数据
            fx.executeSql('insert into stu (id,name) values (01,"王清")');
            fx.executeSql('insert into stu (id,name) values (02,"王思聪")');
            fx.executeSql('insert into stu (id,name) values (04,"张博洋")');
            fx.executeSql(
                'insert into stu (id,name) values (?,?)',
                [07,"张三"],
                ()=>{
                    console.log('02数据插入成功')
                },
                ()=>{
                    console.log('02数据插入失败')
                }
            );
            // 更新数据
            fx.executeSql('update stu set name="张宇" where id=07');

            // 查询数据
            fx.executeSql(
                'select * from stu',
                [],
                (fx,result)=>{
                    console.log('查询结果：',result.rows);
                    for (let i=0;i<result.rows.length;i++) {
                        console.log(result.rows.item(i));
                    }
                }
            );

            // 删除数据
            fx.executeSql('delete from stu where id=01');

            // 删除表
            fx.executeSql('drop table stu');
        })
    }

4.HTML5离线存储

(1)配置服务器(这里以Apache为例)
	AddType text/cache-manifest .manifest
(2)在根目录下新建文件 cache.manifest，该文件叫缓存清单，内容如下：
		#这一句必须存在，而且必须放在开头
		CACHE MANIFEST
		#离线的时候可以访问的文件
		CACHE:   
		1.html
		1.js
		1.css
		#有网的时候才可以访问的文件
		1.jpg
		#如果访问不到1.html可以加载2.html
		FALLBACK:
		1.html  2.html
(3)在html文件中添加内容
		<html manifest='cache.maifest'></html>
注：
	a.从没有网的环境到有网的环境，需要修改一下cache.manifest文件，随便修改什么都行，哪怕打一个空格键，让它重新加载新内容
	b.判断当前环境是有网还是没有网，使用navigator.onLine来进行判断