这里是我所学到的h5中其他新增api，个人觉得对开发还是有一定帮助的，所以专门写在第三部分的文章里。
数据储存
在之前，本人一直使用cookie作为本地数据缓存的方法，但是该方法有比较多的限制，比如字节大小限制，受限于http服务，安全问题等；那么这些问题，就可以用另外两种方法来互补，分别是本地储存和会话储存。
会话存储
// 定义颜色
var myColor = "red";
// 设置会话储存数据
sessionStorage.setItem("myColor",myColor);
// 获取会话储存的数据
var _color = sessionStorage.getItem("myColor");
// console.log(_color);// red
// 删除会话储存（指定的）
// sessionStorage.removeItem("myColor");
// 删除所有的回话储存
// sessionStorage.clear();
本地存储
// 用户名称
var userName = "adminxxx";
// 设置本地储存(先储存数据)
localStorage.setItem("userName",userName);
// 获取本地储存（然后取数据）
var _userName = localStorage.getItem("userName");
// 删除储存(指定的数据)
// localStorage.removeItem("userName");
// 删除所有储存的数据
// localStorage.clear();
这里就他们之间的区别做出以下优劣对比：
一、存储时间的问题
cookie如果不设置有效期的话，默认在关闭浏览器时清除
sessionStorage仅保持在当前窗口，支持跳转，但如果关闭当前对话框（这也是为什么叫做会话储存的原因），就会清除
localStorage如果不手动删除，就会一直有效
二、存储大小
这个也没啥好比的，cookie就能存几kb，后两个能存5mb
三、安全问题
cookie会参与服务端交互，会将数据通过http（这里就是cookie为什么要在http服务下）传递，所以会直接暴露密码类的敏感信息
localStorage和sessionStorage是单纯的前端存储，没啥服务器交互
p.s.关于存储这里只写最简单便捷的操作，详细带我有空写一下有关session具体的东西
元素拖拽事件
这里要区别于mousemove，不动的可以在看完以后试一下。（有点像桌面上，拖动小图标的做法）
// 编码：
var box = document.querySelector(".box");
// 开始拖动(按下目标元素并开始拖动)
box.ondragstart = function(){
// console.log("ondragstart");
}
// 结束拖动(拖动目标元素并松开鼠标)
box.ondragend = function(){
// console.log("ondragend");
}
// 拖拽移入目标元素(拖动标签移入目标元素)
box.ondragenter = function(){
// console.log("ondragenter");
}
// 拖拽移出目标元素(拖动标签移出目标元素)
box.ondragleave= function(){
// console.log("ondragleave");
}
// 拖拽在目标元素上悬停
box.ondragover = function(event){
// console.log("ondragover");
// 阻止浏览器默认行为
event.preventDefault();
}
// 拖动到目标元素上悬停(结合ondragover行为)
box.ondrop = function(){
console.log("ondrop");
}
备注:
以上事件是拖拽行为，是PC端的行为,需要给目标元素添加标签属性 draggable="true"，才能拖拽元素
元素触摸事件
这里是涉及到移动端的概念，试想pc端可以用鼠标进行点击操作，但用手机，用iPad呢？这里就涉及到了触摸这一事件
开始触摸 ontouchstart
触摸滑动 ontouchmove
结束触摸 ontouchend
这里的操作并没有什么难点。就是要区别于pc端而已，还有就是移动端需要使用自适应单位（比如%，rem，em等）
全屏显示方法
许多时候，网页会提供一个双击或者单击显示全屏图片或者视频的功能，js原生代码可以设置双击事件，然后设置css属性，这里h5提供了一个更加便捷的方法
equestFullscreen() 请求全屏显示
exitFullscreen() 退出全屏
这里要注意的点是，exitFullscreen方法要绑定在document上，以为全屏显示后图片会占满document文档。
断网事件和连网事件
这个就是用来查询网络状态的，在断网或者连网以后触发，这里可以理解为监听网络状态的方法
online 连网后触发
offline 断网后触发
var msgElement = document.querySelector(".message");
// 监听网络状态
// 网络断开了（拔网线了）
window.addEventListener('offline', function () {
console.log("网络断开");
msgElement.innerHTML = "网络掉线了";
// msgElement.classList.add("error");
// msgElement.classList.remove("success");
msgElement.className = "message error";
animate(msgElement,{top: 0})
})
// 网络连接了
window.addEventListener('online', function () {
console.log("网络连接");
msgElement.innerHTML = "网络连接了";
msgElement.className = "message success";
animate(msgElement,{top: "-100px"})
})
地理定位
说来惭愧，该内容讲解时，我在睡觉。。
咳咳，该属性其实是涉及到私人隐私的，因此在使用时，如果浏览器拒绝提供敏感信息，就会导致请求失败。除此之外呢，该方法其实也并没有什么难点。也就是返回的值多一点吧
语法格式：navigator.geolocation.getCurrentPosition(pos)
返回属性：
pos.latitude 十进制数的纬度
pos.longitude 十进制数的经度
pos.accuracy 位置精度
pos.altitude 海拔，海平面以上以米计
pos.altitudeAccuracy 位置的海拔精度
pos.heading 方向，从正北开始以度计
pos.speed 速度，以米 / 每秒计
timestamp 响应的日期 / 时间
