H5-地理定位/本地存储/拖放
一、地理定位 Geolocation
兼容性：Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation（地理定位）。
一次性定位 getCurrentPosition()
getLocation() function getLocation(){ if (navigator.geolocation) { console.log('支持定位'); window.navigator.geolocation.getCurrentPosition(success,error); }else{ console.log('浏览器不支持定位'); } } //成功获取地理位置时候的回调函数 function success (position) { console.log(position); const {latitude, longitude} = position.coords } //地理位置获取失败时候的回调函数 function error (error) { console.log(error.message);//失败信息 }
实时定位 watchPosition()
getLocation() function getLocation(){ if (navigator.geolocation) { console.log('支持定位'); window.navigator.geolocation.watchPosition(success,error); }else{ console.log('浏览器不支持定位'); } } //成功获取地理位置时候的回调函数 function success (position) { console.log(position); const {latitude, longitude} = position.coords } //地理位置获取失败时候的回调函数 function error (error) { console.log(error.message);//失败信息 }
二、web存储
兼容性：Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
localStorage：
1. 永久生效
2. 多窗口共享
3. 容量大约为20M
◆window.localStorage.setItem(key,value) 设置存储内容
◆window.localStorage.getItem(key) 获取内容
◆window.localStorage.removeItem(key) 删除内容
◆window.localStorage.clear() 清空内容
只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage：
1. 生命周期为关闭当前浏览器窗口
2. 可以在同一个窗口下访问
3. 数据大小为5M左右
◆window.sessionStorage.setItem(key,value)
◆window.sessionStorage.getItem(key)
◆window.sessionStorage.removeItem(key)
◆window.sessionStorage.clear()
除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下，就能读取/修改。
三、拖放
兼容性：Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动，但Safari 5.1.2不支持拖动。
分析：分成两部分，一部分是被拖动的元素，另一部分是接收拖动元素的区域元素
被拖动元素：
draggable 属性设置为 true
ondragstart 属性调用了一个函数drag(event)
接收拖动元素的区域元素：
ondragover 属性事件规定在何处放置被拖动的数据 event.preventDefault()
ondrop 属性调用了一个函数drop(event)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body{
display: flex;
justify-content: space-around;
}
div{
width: 150px;
height: 80px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div ondragover="alowDrag(event)" ondrop="drop(event)"></div>
<div ondragover="alowDrag(event)" ondrop="drop(event)"></div>
<span id="span" draggable="true" ondragstart="dragstart(event)">移动我哦</span>
</body>
<script>
function dragstart(event){
event.dataTransfer.setData("span",event.target.id)
}
function alowDrag(event){
event.preventDefault()
}
function drop(event){
event.preventDefault()
var data = event.dataTransfer.getData("span")
event.target.appendChild(document.getElementById(data))
}
</script>
</html>