image.png
    image.png

    地理信息：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <style>
    9.         #box{
    10.             width:500px;
    11.             height:500px;
    12.             border: 2px solid deeppink;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <button id="btn">请求位置信息</button>
    18.     <div id="box"></div>
    19.     <script>
    20.         let btn = document.getElementById('btn');
    21.         let box = document.getElementById('box');
    22.         btn.onclick = function(){
    23.             //getCurrentPosition与定时器setInterval类似多次请求，因为位置需要不间断的获取
    24.             //直接navigator.geolocation表示单次获取位置
    25.             navigator.geolocation.getCurrentPosition(function (position){
    26.                 box.innerHTML += "经度" + position.coords.longitude;
    27.                 box.innerHTML += "纬度" + position.coords.latitude;
    28.                 box.innerHTML += "准确度" + position.coords.accuracy;
    29.                 box.innerHTML += "海拔" + position.coords.altitude;
    30.                 box.innerHTML += "海拔准确度" + position.coords.altitudeAccuracy;
    31.                 box.innerHTML += "行进方向" + position.coords.heading;
    32.                 box.innerHTML += "地面速度" + position.coords.speed;
    33.                 box.innerHTML += "请求时间" + new Date(position.timestamp);
    34.             }, function(err){
    35.                 alert(err.code);
    36.                 //code：返回获取位置的状态码
    37.                 //  0  :  不包括其他错误编号中的错误
    38.                 //  1  :  用户拒绝浏览器获取位置信息
    39.                 //  2  :  尝试获取用户信息，但失败了
    40.                 //  3  :  设置了timeout值，获取位置超时了
    41.             },{
    42.                 enableHighAccuracy: false, //位置是否精确获取
    43.                 timeout: 5000,             //获取位置允许的最长时间
    44.                 maximumAge: 1000           //多久更新获取一次位置
    45.             });
    46.         }
    47.     </script>
    48. </body>
    49. </html>

    web存储：
    image.png
    image.png
    image.png

    离线缓存：
    image.png
    image.png

    image.png
    image.png

    image.png

    注意：
    离线缓存是针对应用程序的，所以要将测试页面发布到server上面才可以，可以用VSCode的live server插件来实现。

    需要新建一个文件 cache.appcache，文件后缀名必须为appcache。

    1. CACHE MANIFEST
    2. # 2020-03-04 V1.0.0
    3. CACHE:
    4. ./cache.css
    5. ./cache.js
    7. NETWORK:
    8. login.php
    10. FALLBACK:
    11. /html5/

    在html节点中添加属性 manifest=”cache.appcache”

    html示例代码：
    注意：

    1. <!DOCTYPE html>
    2. <html lang="en" manifest="cache.appcache">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <script type="text/javascript" src="./cache.js"></script>
    9.     <link rel="stylesheet" href="./cache.css"/>
    10. </head>
    11. <body>
    12.     <div>
    13.         Hello
    14.     </div>
    15. </body>
    16. </html>

    如果不用离线缓存的话，应用程序所需的资源每次都会下载，而使用了离线缓存，则根据manifest文件进行存储设置，如果一个资源被设置为缓存，则下次访问时会从本地磁盘读取。

    注意： disk cache
    image.png