1.2HTML5新增①地理API②localStorage和sessionStorage

总结： html5有哪些新特性？

HTML5主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放(Drag and drop) API

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

一：地理定位（ Geolocation Api ）

使用js获取当前位置坐标（经纬度）。然后传入到百度地图或者高德地图上，并显示到页面上。

参考链接​​​​​​

1.请求方式

①单次定位请求 navigator.geolocation.getCurrentPosition(成功回调，失败回调，数据收集方式)

请求成功会获得以下数据

coords.longitude  用户地理位置的十进制经度

coords.latitude  用户地理位置的十进制纬度

coords.accuracy 用户地理位置的 位置精度  以米为单位

coords.altitude  用户海拔

coords.altitudeAccuracy 用户地理位置的 位置海拔精度  以米为单位

coords.heading 用户设备当前移动的角度方向，以正北方向顺时针计算。

coords.speed 用户当前的 移动速度 以米为单位

timestamp 响应的时间/日期

请求失败会获得

失败编号：code

-0：不包括其他错误编号中的错误（编写错误）

-1： 用户拒绝浏览器获取位置信息

-2：尝试获取用户信息，但失败了

-3：设置了timeout值，获取位置超时了

数据收集方式

enableHighAcuracy:更精确的查找，默认false

timeout: 获取位置允许最长时间， 默认infinity

maximumAge： 位置可以缓存的最大时间，默认0

基础版本：

	<script type="text/javascript">
		function getLocation(){
             var options={
                 enableHighAccuracy:true, //boolean 是否要求高精度的地理信息，默认为false
                 maximumAge:1000 //应用程序的缓存时间
             }
 
             if(navigator.geolocation){
                 //浏览器支持geolocation
                 navigator.geolocation.getCurrentPosition(onSuccess,onError,options); 
             }else{
                 //浏览器不支持geolocation
                 console.log("浏览器不支持!");
             }
          }
		
		//成功时
		function onSuccess(position){
			//经度
            var longitude =position.coords.longitude;
            //纬度
            var latitude = position.coords.latitude;
            var map = new AMap.Map('container', {
		       center:[longitude,latitude],
		       zoom:16
		    });
			
			// 创建 infoWindow 实例	
			var infoWindow = new AMap.InfoWindow({
			   content: "<div style='width:200px;padding:10px;'>"+
                  "您在这里<br/>纬度："+  latitude+  "<br/>经度："+longitude  //传入 dom 对象，或者 html 字符串
			});
			// 打开信息窗体
			infoWindow.open(map);
			// 在指定位置打开已创建的信息窗体
			var location = new AMap.LngLat(longitude, latitude);
			infoWindow.open(map, location);
		}
		
		//失败时
		function onError(error){
			switch(error.code){
                 case error.PERMISSION_DENIED:
                 alert("用户拒绝对获取地理位置的请求");
                 break;
 
                 case error.POSITION_UNAVAILABLE:
                 alert("位置信息是不可用的");
                 break;
 
                 case error.TIMEOUT:
                 alert("请求用户地理位置超时");
                 break;
 
                 case error.UNKNOWN_ERROR:
                  alert("未知错误");
                 break;
             }
		}
		
		window.onload=getLocation();
	</script>

此代码在PC端运行，会得不到数据，因为获取位置信息，以及监控位置的变化这些操作都属于敏感性操作，所以browsers在执行都会非常谨慎。它需要你在安全的环境并且获取用户的同意才会执行。

在移动端，会提示是否允许地理位置授权，用户同意后，才会继续获取数据，进行下面的操作。

②重复性的位置更新请求 (参数及返回值和楼上一样)

navigator.geolocation.watchPosition(成功回调，失败回调，数据收集方式)

数据收集方式： frequency:2000   2秒更新一次

2.获取百度地图密钥  学习视频

获取AK

官方文档

地图名片

API文档

二：新增 Web  存储

1 sessionStorage

1. 每个域名5M

2. 关闭页面，数据自动清除

3. 不同浏览器或者不同标签页无法共享数据，但是一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的

2 localStorage

1. 每个域名5M
2. 永久生效，数据存储在硬盘上，必须手动清除
3. 不同浏览器不能共享数据。但是在相同浏览器的不同窗口中可以共享数据
4. 用途：记录用户名，保存草稿

setItem ( key , value ): 存储数据，以键值对的方式存储
getItem ( key ): 获取数据，通过指定名称的key获取对应的value值
removeItem ( key ): 删除数据，通过指定名称key删除对应的值
clear (): 清空所有存储的内容

均保存在客户端，不参与浏览器交互通信

基本使用链接

区别参考链接

延伸：前端的Cookie和Session   参考链接

1.二者区别：

• Cookie存储在浏览器或者本地中，Session存储在服务器端
• Cookie的安全性没有Session高（Cookie有安全隐患，通过拦截或本地文件找得到你的cookie后可以进行攻击）
• 浏览器限制一个站点最高能有20个cookie，并且每个不超过4k，Session没有大小限制，取决与服务器端内存大小
• Session 能够存储任意的 java 对象，Cookie 只能存储 String 类型的对象
• Session占用服务器性能，Session过多，增加服务器压力
• session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效，此时如果想继续使用session id 就要用 response.encodeURL(path)重写URL

2.为什么使用Cookie

因为Web服务端使用的是HTTP传输协议，HTTP是无状态协议，对数据没有记忆能力，如果第二次还需要此数据，需要重新发起请求，导致每次连接传输的数据量增大。

所以就此产生了cookie，第一次登录后服务器返回一些数据(cookie)给浏览器，浏览器保存在本地，当用户第二次发起请求时，就会自动把上次请求存储的cookie数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。

3.cookie和session结合使用：

1. 存储在服务端：通过cookie存储一个session_id，然后具体的数据则是保存在session中。如果用户已经登录，则服务器会在cookie中保存一个session_id，下次再次请求的时候，会把该session_id携带上来，服务器根据session_id在session库中获取用户的session数据。就能知道该用户到底是谁，以及之前保存的一些状态信息。这种专业术语叫做server side session。
2. 将session数据加密，然后存储在cookie中。这种专业术语叫做client side session。flask采用的就是这种方式，但是也可以替换成其他形式。