H5-地理定位/本地存储/拖放
发布于 2021-01-01 16:52
一、地理定位 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)
<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>
本文来自网络或网友投稿，如有侵犯您的权益，请发邮件至：aisoutu@outlook.com 我们将第一时间删除。
相关素材