一、地理定位 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>

H5-地理定位/本地存储/拖放的更多相关文章

  1. h5新增属性本地存储

    ---恢复内容开始--- 存储的两种类型: localStorage 和 sessionStorage localstorage:没有时间限制的数据存储 sessionStorage  针对一个ses ...

  2. H5新特性 本地存储---cookie localStorage sessionStorage

    本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...

  3. H5地理定位获取用户当前位置、城市

    第一步:需要在百度地图开发者平台创建一个应用:http://lbsyun.baidu.com/apiconsole/key/create 配置信息 申请配置成功以后返回一个AK 第二步:引入百度地图的 ...

  4. H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）

    一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...

  5. H5本地存储详解

    H5之前存储数据一般是通过 cookie ,但是 cookie 存的数据容量比较少.H5 中扩充了文件存储能力,可存储多达 5MB 的数据.现在就实际开发经验来对本地存储 ( Storage ) 的使 ...

  6. 彻底搞懂Html5本地存储技术（一）

    一.H5之前客户端本地存储的实现 1. cookies cookies的应用比较广泛,但有以下几个问题: (1)每次http请求头上会带着,浪费资源 (2)每个域名客户端只能存储4K大小 (3)会造成 ...

  7. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  8. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  9. HTML5_05之SVG扩展、地理定位、拖放

    1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg">  方法二:<body><svg></svg>&l ...

随机推荐

  1. B. Irreducible Anagrams【CF 1290B】

    思路: 设tx为t类别字符的个数. ①对于长度小于2的t明显是"YES"②对于字符类别只有1个的t明显是"YES"③对于字符类别有2个的t,如左上图:如果str ...

  2. Spark存储Parquet数据到Hive，对map、array、struct字段类型的处理

    利用Spark往Hive中存储parquet数据,针对一些复杂数据类型如map.array.struct的处理遇到的问题? 为了更好的说明导致问题的原因.现象以及解决方案,首先看下述示例: -- 创建 ...

  3. 洛谷P3901 数列找不同(莫队水题)

    重温下手感,判断区间是否全是不同的数字有两种做法,一个长度为len的区间不同的数字,参见HH的项链,一种是区间众数,参见蒲公英,是水题没错了.明天搞数据库,然后继续自己的gre和训练计划 #inclu ...

  4. （十八）面向流水线的设计：CPU的一心多用

    一.单指令周期       由前可知,一条CPU指令的执行有三个步骤:指令读取.指令译码.指令执行.由于这个过程受CPU时钟的控制,如果我们将这个过程安排在一个CPU时钟周期内执行,这种设计思路就叫单 ...

  5. 为什么Python中sort方法和sorted函数调用废弃使用cmp参数

    Python中sort方法和sorted函数老猿在前面一些章节介绍过,具体语法及含义在此不再展开说明,但老猿在前面学习相关内容时,只使用了简单的案例,对这两个方法的key参数没有深入研究,总以为就是以 ...

  6. Hbase 2.2.2 简单API操作

    前言 小案例中有创建表.创建命名空间.插入数据.获取数据. 环境准备 maven依赖可根据自己的版本进行调整 <!-- hbase依赖--> <dependency> < ...

  7. Fiddle过滤目标主机

    测试某管理系统,查看接口的调用: 点击Actions->Run Filterset now,即可过滤出设置的域名. 若使用通配符*,可将含域名的一级二级域名过滤出.

  8. Python Flask后端异步处理（一）

    Flask是Python中有名的轻量级同步Web框架,但是在实际的开发中,可能会遇到需要长时间处理的任务,此时就需要使用异步的方式来实现,让长时间任务在后台运行,先将本次请求的相应状态返回给前端,不让 ...

  9. Python 常用方法和模块的使用(time & datetime & os &random &sys &shutil)-（六）

    1 比较常用的一些方法 1.eval()方法:执行字符串表达式,并返回到字符串. 2.序列化:变量从内存中变成可存储或传输到文件或变量的过程,可以保存当时对象的状态,实现其生命周期的延长,并且需要时可 ...

  10. python菜鸟教程学习10：数据结构

    列表方法 list.append(x):把一个元素添加到列表的结尾,相当于 a[len(a):] = [x]. list.extend(L):通过添加指定列表的所有元素来扩充列表,相当于 a[len( ...