【前端】 Geolocation api 以及本地存储相关内容-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43872912/article/details/144567436

一、场景描述

1、利用geolocation api获取本地所在经纬度并利用接口获取相关天气预报。
2、本地存储相关内容。

二、相关知识点

2.1 geolocation api 相关内容

在这里插入图片描述
这部分内容其实主要就分为两个方法，一个是获取当前经纬度的方法—Geolocation.getCurrentPosition()，另一个是对当前位置进行监听的方法—Geolocation.watchPosition()。
这两个方法的参数都是三个，且一致：第一个是当前位置监听成功后的运行的方法，success；第二个是报错后的方法，errorcallback；第三个是相关参数设置对象。其余内容如上所示。

2.2 本地存储相关内容

本地存储分为会话存储（临时存储）以及本地存储（永久存储）。
还有一个cookie是用于跟踪客户端状态，服务器保存在客户端的信息，在下次请求的时候，客户端会将cookie还给服务器，服务器就可以通过信息来识别客户端。
在这里插入图片描述
本地存储以及会话存储的相关内容其实差不多，就是存储（setItem）、获取（getItem）、删除（removeItem），如上图所示。

2.3 免费接口网址

接口盒子网站，注册免费，注册完就可以用自己的id和key来使用接口。
https://www.apihz.cn/

三、案例实现

3.1 利用geolocation api获取本地所在经纬度并利用接口获取相关天气预报

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="getWeather" >利用经纬度获取当前城市天气</button>
</body>
<script>
    //使用获取得到的经纬度调用天气Api
    var latitude = 0,longitude=0;
    //根据getCurrentPosition方法获取经纬度
    navigator.geolocation.getCurrentPosition(
        function(position){
            var crd = position.coords;
            latitude = crd.latitude;
            longitude = crd.longitude;
            console.log(`经度：${latitude}`);
            console.log(`纬度：${longitude}`);
            console.log(`误差：${crd.accuracy} 米`);
        },
        function(error){
            console.log("获取经纬度失败：",error);
        },{
            enableHighAccuracy:false,
            timeout:5000,
            maximumAge:0
        }
    )
    var weatherButton = document.getElementById("getWeather");
    //点击按钮后，访问接口获取天气数据
    weatherButton.addEventListener("click",function(event){
        var url = `https://cn.apihz.cn/api/tianqi/tqybjw5.php?id=10001553&key=fdd9f1912e5da6a5f3a5e2bebe615121&lat=${latitude}&lon=${longitude}` ;
        fetch(url,{
            headers:{
                "Access-Control-Allow-Origin":'*'
            }
        }).then( (response) => response.json() )
        .then( (data) => {
            console.log(data);
        } )
 
    })
</script>
</html>

天气的json结果就不展开了。
在这里插入图片描述

3.2 存储相关内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="sessionStorageDiv">
        <h2>test sessionStorage</h2>
        <label for="sessionStorageTest">key:</label><input type="text" id="sessionStorageKey">
        <label for="sessionStorageTest">value:</label><input type="text" id="sessionStorageValue">
        <button id="saveSessionStorageBtn">存储sessionStorage</button>   <br/>  
        <button id="outputSessionStorageBtn">输出现有sessionStorage</button>   <br/>  
        <label for="delSessionStorageKey">key:</label><input type="text" id="delSessionStorageKey">
        <button id="delSessionStorageBtn">删除所选sessionStorage</button>  
    </div>
 
    <div id="localStorageDiv"></div>
        <h2>test localStorage</h2>
        <label for="localStorageTest">key:</label><input type="text" id="localStorageKey">
        <label for="localStorageTest">value:</label><input type="text" id="localStorageValue">
        <button id="saveLocalStorageBtn">存储localStorage</button>   <br/>  
        <button id="outputLocalStorageBtn">输出现有localStorage</button>   <br/>  
        <label for="delLocalStorageKey">key:</label><input type="text" id="delLocalStorageKey">
        <button id="delLocalStorageBtn">删除所选localStorage</button>  
    </div>
 
 
    <div id="cookieDiv">
        <h2>test cookie</h2>
        <label for="cookieTest">key:</label><input type="text" id="cookieKey">
        <label for="cookieTest">value:</label><input type="text" id="cookieValue">
        <button id="saveCookieBtn">存储cookie</button>        <br/>
 
        <button id="outputAllCookieBtn">输出所有cookie</button>
 
        <label for="delCookieKey">key:</label><input type="text" id="delCookieKey">
        <button id="delCookieBtn">删除所选Cookie</button>  
 
    </div>
 
 
 
</body>
<script>
 
    function addCookie(objName,objValue,objHours){//添加cookie
        var str = objName + "=" + escape(objValue);
        if(objHours > 0){//为0时不设定过期时间，浏览器关闭时cookie自动消失
            var date = new Date();
            var ms = objHours*3600*1000;
            date.setTime(date.getTime() + ms);
            str += "; expires=" + date.toGMTString();
        }
        document.cookie = str;
        alert("添加cookie成功");
    }
 
 
    var saveKey = "",saveValue = "",delKey = "",
    saveSessionStorageBtn = document.getElementById("saveSessionStorageBtn"),
    outputSessionStorageBtn = document.getElementById("outputSessionStorageBtn"),
    delSessionStorageBtn = document.getElementById("delSessionStorageBtn");
 
    saveSessionStorageBtn.addEventListener("click",function(){
        saveKey = document.getElementById("sessionStorageKey").value;
        saveValue = document.getElementById("sessionStorageValue").value;    
        window.sessionStorage.setItem(saveKey,saveValue);
    })
    outputSessionStorageBtn.addEventListener("click",function(){
        for(var i =0;i<window.sessionStorage.length;i++){
            const key = window.sessionStorage.key(i);
            console.log("key:"+key);
            console.log("value:"+window.sessionStorage.getItem(key));
        }
    })
 
    delSessionStorageBtn.addEventListener("click",function(){
        delKey = document.getElementById("delSessionStorageKey").value;
        window.sessionStorage.removeItem(delKey);
    })
 
    var saveLocalStorageBtn = document.getElementById("saveLocalStorageBtn"),
    outputLocalStorageBtn = document.getElementById("outputLocalStorageBtn"),
    delLocalStorageBtn = document.getElementById("delLocalStorageBtn");
 
    saveLocalStorageBtn.addEventListener("click",function(){
        saveKey = document.getElementById("localStorageKey").value;
        saveValue = document.getElementById("localStorageValue").value;    
        window.localStorage.setItem(saveKey,saveValue);
    })
    outputLocalStorageBtn.addEventListener("click",function(){
        for(var i =0;i<window.localStorage.length;i++){
            const key = window.localStorage.key(i);
            console.log("key:"+key);
            console.log("value:"+window.localStorage.getItem(key));
        }
    })
 
    delLocalStorageBtn.addEventListener("click",function(){
        delKey = document.getElementById("delLocalStorageKey").value;
        window.localStorage.removeItem(delKey);
    })
 
 
    var outputAllCookieBtn = document.getElementById("outputAllCookieBtn"),
    saveCookieBtn = document.getElementById("saveCookieBtn"),
    delCookieBtn = document.getElementById("delCookieBtn");
    var c;
 
    saveCookieBtn.addEventListener('click',function(){
        saveKey = document.getElementById("cookieKey").value;
        saveValue = document.getElementById("cookieValue").value;
        document.cookie = saveKey + "=" + saveValue;
    })
 
    outputAllCookieBtn.addEventListener('click',function(){
        console.log("依次输出cookie属性");
        var cookieStr = document.cookie;
        console.log(cookieStr);
        var cookieArr = cookieStr.split("; ");
        for(var i = 0;i<cookieArr.length;i++){
            console.log(i+":"+cookieArr[i]);
        }
    })
 
    delCookieBtn.addEventListener('click',function(){
        delKey = document.getElementById("delCookieKey").value;
        var date = new Date();
        date.setTime(date.getTime() - 1000);
        document.cookie = delKey + "=" + "; expires=" + date.toGMTString();
    })
 
</script>
</html>