一、场景描述
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>//使用获取得到的经纬度调用天气Apivar 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){//添加cookievar 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>
