> ## :-: H5 - 获取地理位置 (2019-6-30) ``` // H5 - 获取地理位置 (HTTPS/file协议下才能用、HTTP协议不行) // 经度最大值180，纬度最大值90、 window.navigator.geolocation.getCurrentPosition(function(position) { // 成功回调 console.log(position); // Geoposition {coords: Coordinates, timestamp: 1561865377145} }, function() { // 失败回调 console.log('fail to get'); }); ``` > ## :-: H5 - 重力感应(陀螺仪) (2019-6-30) ``` // H5 - 重力感应(陀螺仪) // ios设备需要https协议、安卓设备没那么多限制、 // alpha:指北(指南针) [0,360] 当为0的时候指北，180指南。 // beta:平放的时候beta值为0。如果将手机立起来(短边接触桌面) 直立的时候beta为90度、 // gamma:平放的时候gamma值为0。如果将手机立起来(长边接触桌面)，直立的时候gamma为90度、 window.addEventListener('deviceorientation', function(event) { console.log(event) }); ``` Demo - Gyroscope：http://a-1.vip/demo/Gyroscope > ## :-: H5 - 设备加速度(判断晃动) (2019-6-30) ``` window.addEventListener('devicemotion', function(event) { // event.acceleration.x | event.acceleration.y | event.acceleration.z if (Math.abs(event.acceleration.x) > 50 || Math.abs(event.acceleration.y) > 50 || Math.abs(event.acceleration.z) > 50) { alert('稳住，小老弟 ~'); } }); ``` > ## :-: H5 - [requestAnimationFrame](https://www.jianshu.com/p/4a04a037084e) (2019-6-30) ``` // js动画最佳实现 -- requestAnimationFrame(func); - 兼容性极差 // 屏幕刷新率60Hz，每秒60帧、 let element = document.getElementById('main'), timer = null; function move() { element.style.left = element.offsetLeft + 20 + 'px'; timer = requestAnimationFrame(move); // 设置定时器(1000ms/60) if (element.offsetLeft > 1400) cancelAnimationFrame(timer); // 清除定时器 } move(); ``` Demo：http://a-1.vip/demo/H5/requestAnimationFrame > ## :-: H5 - [数据存储](https://www.cnblogs.com/minigrasshopper/p/8064367.html) (2019-6-30) ``` localStorage -- 本地存储(长期) sessionStorage -- 会话存储(临时) // localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型). // 写入 -- localStorage.name = 'test' // 读取 -- localStorage.name // 删除 -- localStorage.removeItem('name'); // 清空 -- localStorage.clear(); ``` | 特性 | Cookie | localStorage | sessionStorage | | :---: | :---: | :---: | :---: | | 数据的生命期 | 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 | | 存放数据大小 | 4K左右 | 一般为5MB | [Refer to the left] | | 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | [Refer to the left] | | 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | [Refer to the left] | 下面的代码片段访问了当前域名下的本地[`Storage`](https://developer.mozilla.org/zh-CN/docs/Web/API/Storage "作为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。")对象，并通过[`Storage.setItem()`](https://developer.mozilla.org/zh-CN/docs/Web/API/Storage/setItem "setItem() 作为 Storage 接口的方法，接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。")增加了一个数据项目。 ~~~js localStorage.setItem('myCat', 'Tom'); ~~~ 该语法用于读取`localStorage`项，如下: ~~~js let cat = localStorage.getItem('myCat'); ~~~ 该语法用于移除`localStorage`项，如下: ~~~js localStorage.removeItem('myCat'); ~~~ 该语法用于移除所有的`localStorage`项，如下: ~~~js localStorage.clear(); ~~~ > ## :-: H5 - [Event](https://www.w3cschool.cn/fetch_api/fetch_api-2era2pce.html) ``` // url被改变事件、 addEventListener('popstate', (e) => { console.log(e) }); // url中的锚点(hash)被改变事件、 addEventListener('hashchange', (e) => { console.log(e) }); ``` ` e.preventDefault(); // 阻止默认事件、`