> ## :-: 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(); // 阻止默認事件、`