Geolocation
Geolocation 是 geography location 的簡稱，就是常說的地理位置。
HTML5 引用了地理位置 API，但大家回憶一下自己使用一個站點的經歷，應該會有印象，網站會有詢問信息，問是否允許使用。
地理位置信息屬于用戶的隱私，未經同意是不可以使用的。
使用 HTML 5 提供的地理位置信息 API，主要是 navigator.geolocation 下面的 getCurrentPosition 這個方法。
getCurrentPosition 返回地理位置對象，里面包含 coords 屬性。
coords 屬性也是個對象，它包含 latitude 和 longitude 兩個值。
<head> <script> function getLocation() { var x = document.getElementById("position"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "該瀏覽器不支持獲取地理位置。"; } } function showPosition(position) { var x = document.getElementById("position"); x.innerHTML = `緯度: ${position.coords.latitude} <br>經度: ${position.coords.longitude}`; } </script> <noscript>您的瀏覽器不支持 JavaScript或禁用了Javascript!</noscript> </head> <body> <div id="position">點擊按鈕獲取您當前坐標：</div> <button onclick="getLocation()">點我</button> </body>
在第一次調用 getCurrentPosition 方法之前，瀏覽器會詢問我們是否允許使用。
只有當同意之后，才會執行接下來的代碼并獲得位置信息。
getCurrentPosition() 方法的返回數據
返回的 coords 對象里，除了前面使用的 latitude 和 longitude，還有以下值：
accuracy: 位置精度。
altitude: 海拔，海平面以上以米計。
altitudeAccuracy: 海拔精度。
heading: 方向，從正北開始以度計。
speed: 速度，以米/每秒計。
另外，該方法還返回 timestamp 時間戳信息，表示響應的日期時間。
Geolocation 對象的 watchPosition()方法
除了 getCurrentPosition 方法，Geolocation 還有 watchPosition() 方法。
從名稱上也能窺見一斑，它返回用戶的當前位置，并持續返回用戶移動時的更新位置。
是不是有點像導航?
相應的方法 clearWatch()則是停止 watchPosition()方法。
使用地圖服務獲得地理位置信息
除了使用 HTML5 提供的 getCurrentPosition 方法獲取地理位置信息之外，還可以使用各大地圖服務提供商的 API 去獲取地址位置信息，比如說使用百度地圖。
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxx" ></script> <script type="text/javascript"> var x = document.getElementById("position"); function getLocation() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (e) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { x.innerText = `緯度：${e.point.lat} 經度：${e.point.lng}`; } else { x.innerHTML = `failed ${this.getStatus()}`; } }); } </script>
可以看到，這里通過 new BMap.Geolocation() 創建出了一個實例，代替上述的 navigator.geolocation。
而后面也略微有差別，它返回的對象是 point.lat 和 point.lng， 而不是 coords.latitude 和 coords.longitude。
但結果都是取到了經緯度信息。
地圖服務提供的服務遠不止這些，具體的需要查閱地圖的 API 文檔。
拖放(Drag/Drop)
拖放是 HTML5 的標準組，它包含了兩個動，拖動和放開。
<head> <style type="text/css"> .container { width: 350px; height: 150px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script type="text/javascript"> function dragOver(e) { e.preventDefault(); } function dragStart(e) { e.dataTransfer.setData("Text", e.target.id); } function drop(e) { e.preventDefault(); var data = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖動圖片到矩形框中:</p> <div id="targetDiv" class="container" ondrop="drop(event)" ondragover="dragOver(event)" ></div> <br /> <img id="imgDrag" src="../img/html-0.jpg" draggable="true" ondragstart="dragStart(event)" width="300" height="110" /> </body>
拖放都是標簽的事件，在被拖放對象上，首先把屬性 draggable 設置成 true。
然后實現它的 ondragstart()方法，在這個方法里，把通過傳入的事件句柄對象(e)，進行拖放對象的傳輸，也就是要 setData()。
同時在拖放的目標位置，實現方法 ondrop()和 ondragover()。
其中 drop 方法里，通過 getData()方法獲取拖放對象，然后通過 appendChild()方法把它追加到目標位置里。
ondragover()方法決定被拖放的內容放置到何處，默認是無法將一個元素內容的東西放到另一個元素里，如果要允許，除了對被播放對象設置 draggable 為 true，還得要阻止目標元素的默認出處理方式。這里只使用事件的 preventDefault()方法阻止。
存儲
以往前端本地存儲使用 cookie，但是在 HTML5 里，有比 cookie 更好的本地存儲方式。
本地存儲的意思，是存儲在用戶的電腦端，這樣有些數據從服務器端獲取之后緩存到本地，可以大大提高網站的性能。
本地存儲以鍵值對形式存在，而且某個網頁存儲的內容只能該網頁訪問。
客戶端存儲數據的對象有兩個：localStorage 和 sessionStorage。
localStorage
用于長久保存整個網站的數據，數據沒有過期時間，直到手動刪除。
<head> <script> function readlocalStorage() { var messageDiv = document.getElementById("messageDiv"); if (typeof Storage !== "undefined") { localStorage.setItem("message", "這是一條存儲在localStorage里的消息。"); messageDiv.innerHTML = localStorage.getItem("message"); } else { messageDiv.innerHTML = "對不起，您的瀏覽器不支持 web 存儲。"; } } </script> </head> <body> <button id="getLocalStorage" onclick="readlocalStorage()" value=""> 點我讀取本地存儲 </button> <div id="messageDiv"></div> </body>
localStorage 常用的方法有如下，相應的 sessionStorage 也一樣。
保存數據：localStorage.setItem(key,value)
讀取數據：localStorage.getItem(key)
刪除單個數據：localStorage.removeItem(key)
刪除所有數據：localStorage.clear()
得到某個索引的 key：localStorage.key(index)
sessionStorage
用于臨時保存同一窗口的數據，在關閉窗口之后會被刪除。
sesessionStorage 和 localStorage 一樣有相應的處理數據方法，上述示例改成 sessionStorage 如下：
<head> <script> function readsessionStorage() { var messageDiv = document.getElementById("messageSessionDiv"); if (typeof Storage !== "undefined") { sessionStorage.setItem( "message", "這是一條存儲在sessionStorage里的消息。" ); messageDiv.innerHTML = sessionStorage.getItem("message"); } else { messageDiv.innerHTML = "對不起，您的瀏覽器不支持 web 存儲。"; } } </script> </head> <body> <button id="getSessionStorage" onclick="readsessionStorage()" value=""> 點我讀取本地session存儲 </button> <div id="messageSessionDiv"></div> </body>
效果同上。
總結
?? 使用地理位置 API 能獲取當前位置信息，但這個獲取需要得到用戶的允許。
?? 拖放是基于標簽的事件實現的，需要在被拖放元素和目標元素實現相應的事件代碼。
?? 本地存儲比 cookie 更好的在本地保存數據，以提高網站的性能。
該文章在 2024/10/22 12:21:50 編輯過
400 186 1886
