HTML5基礎擴展——地理位置、本地存儲、緩存

原創 Long_life_road 2018-08-28 10:08


          HTML5擴展,繼上兩篇博客,我們來看一下Html5的一些擴展的功能,由於HTML5更多是爲了兼容電腦瀏覽器,安卓瀏覽器,蘋果瀏覽器更多瀏覽器,或者說爲這些瀏覽器提供一個統一的標準.因此目前在手機上的web開發，HTML5是比較火的。因此這幾款擴展功能，感覺更多是從手機，平板等角度出發的。

 

         一，地理定位：首先看一下地理位置的定位的幾種形式：IP地址，GPS（Global Positioning System ），Wifi，GSM（Global System for Mobile Communication ）/CDMA（Code Division Multiple Access）。一般手機都是通過GPS進行定位的，相對準確。好看一下HTML5如何實現地理位置：

1. 實現基於瀏覽器（無需後端支持）獲取用戶的地理位置技術 

2. 精確定位用戶的地理位置( 精度最高達10m之內，依賴設備 ) 

3. 持續追蹤用戶的地理位置（實時位置） 

4. 與 Google Map、或者 Baidu Map 交互呈現位置信息。

 

          HTML5提供Geolocation API, 用於將用戶當前地理位置信息共享給信任的站點，這涉及用戶的隱私安全問題，所以當一個站點需要獲取用戶的當前地理位置，瀏覽器會提示用戶是“允許”or “拒絕”。它提供的方法：

1、getCurrentPosition   //當前位置

2、watchPosition           //監視位置

3、clearWatch               //清除監視


看一下參數：

getCurrentPosition(success,error,option)方法最多可以有三個參數：

第一個參數是成功獲取位置信息的回調函數，它是方法唯一必須的參數；

第二個參數用於捕獲獲取位置信息出錯的情況，

第三個參數是配置項。


看一個例子吧：

[html] view plain copy
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <body>  
  5.         <p id="demo">點擊這個按鈕，獲得您的位置：</p>  
  6.         <button onclick="getLocation()">試一下</button>  
  7.         <div id="mapholder"></div>  
  8.   
  9.         <script>  
  10.             //獲取id爲demo的標籤  
  11.             var x=document.getElementById("demo");  
  12.             //getLocation獲取位置的函數，單擊是調用  
  13.             function getLocation()  
  14.               {  
  15.                 //如果瀏覽器支持  
  16.               if (navigator.geolocation)  
  17.                 {  
  18.                 //獲取當前位置，分別傳入了成功和失敗的兩個函數  
  19.                 navigator.geolocation.getCurrentPosition(showPosition,showError);  
  20.                 }  
  21.                 //如果不支持，則進行提示  
  22.               else{x.innerHTML="Geolocation is not supported by this browser.";}  
  23.               }  
  24.             //獲取成功，調用的函數showPosition  
  25.             function showPosition(position)  
  26.               {  
  27.                 //獲取經度和維度  
  28.               var latlon=position.coords.latitude+","+position.coords.longitude;  
  29.                //利用谷歌地圖進行顯示，當然了也可以通過百度地圖  
  30.               var img_url="http://maps.googleapis.com/maps/api/staticmap?center="  
  31.               +latlon+"&zoom=14&size=400x300&sensor=false";  
  32.               document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";  
  33.               }  
  34.             //錯誤調用的函數  
  35.             function showError(error)  
  36.               {  
  37.               switch(error.code)   
  38.                 {  
  39.                     //錯誤1  
  40.                 case error.PERMISSION_DENIED:  
  41.                   x.innerHTML="User denied the request for Geolocation."  
  42.                   break;  
  43.                   //地理位置不可用  
  44.                 case error.POSITION_UNAVAILABLE:  
  45.                   x.innerHTML="Location information is unavailable."  
  46.                   break;  
  47.                  //超時  
  48.                 case error.TIMEOUT:  
  49.                   x.innerHTML="The request to get user location timed out."  
  50.                   break;  
  51.                   //位置錯誤  
  52.                 case error.UNKNOWN_ERROR:  
  53.                   x.innerHTML="An unknown error occurred."  
  54.                   break;  
  55.                 }  
  56.               }  
  57.         </script>  
  58.     </body>  
  59.   
  60. </html>  

          綜上爲簡單的地理定位瞭解，由於只是學習，瞭解的比較淺顯。更多資料可以網絡搜索，非常多的，很容易的幫助我們實現了手機定位的功能開發。

 

          二，獨立數據存儲：意思就是將數據存放到本地，由於手機流量的問題，這個功能在手機客戶端是非常吃香的。這裏看一下WEB本地存儲和WEB SQLDatabase.

        1,web本地存儲是一個windows的屬性，包括localStorage和sessionStorage,從名字應該很容易的區分二者，前者一直存儲在本地，後者只能伴隨着session，窗口關閉也就消失。用法基本一樣，這裏看localStorage:


       先看下存取的方法：



     好， 看一個例子：


[html] view plain copy
 print?
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4.     <body>  
  5.   
  6.         <script type="text/javascript">  
  7.             if (localStorage.pagecount) {  
  8.                 localStorage.pagecount = Number(localStorage.pagecount) + 1;  
  9.             } else {  
  10.                 localStorage.pagecount = 1;  
  11.             }  
  12.             document.write("Visits: " + localStorage.pagecount + " time(s).");  
  13.         </script>  
  14.   
  15.         <p>刷新頁面會看到計數器在增長。</p>  
  16.   
  17.         <p>請關閉瀏覽器窗口，然後再試一次，計數器會繼續計數。</p>  
  18.   
  19.     </body>  
  20.   
  21. </html>  

        2,WEB SQL Database:Web SQL數據庫API實際上不是HTML5規範的組成部分，而是單獨的規範。它通過一套API來操縱客戶端的數據庫。意思就是向瀏覽器安裝了一個數據庫，可以像MySQL，Oracle等進行數據的增刪改查，只是比localStorage更加功能強大而已。打開瀏覽器的開發工具，我們可以看到：


      看一個例子:

[html] view plain copy
 print?
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.         <title>html5-dataBase</title>  
  7.     </head>  
  8.   
  9.   
  10.     <body>  
  11.         <script type="text/javascript">  
  12.             //創建數據庫  
  13.             var db = window.openDatabase("mydata", "1.0", "數據庫描述", 20000);  
  14.              //window.openDatabase("數據庫名字", "版本","數據庫描述",數據庫大小);  
  15.             if (db)  
  16.                 alert("新建數據庫成功！");  
  17.   
  18.             db.transaction(function(tx) {  
  19.                 //執行sql語句，創建表  
  20.                 tx.executeSql("CREATE TABLE test (id int UNIQUE, mytitle TEXT, timestamp REAL)");  
  21.             });  
  22.   
  23.             db.transaction(function(tx) {  
  24.                 //插入數據  
  25.                 tx.executeSql("INSERT INTO test (mytitle, timestamp) values(?, ?)", ["WEB Database", new Date().getTime()], null, null);  
  26.             });  
  27.   
  28.              //db.transaction(function(tx) {  
  29.              // tx.executeSql("DROP TABLE qqs");  
  30.              //})  
  31.   
  32.              //db.transaction(function(tx) {  
  33.              // tx.executeSql("update test set mytitle=? where mytitle = 'fsafdsaf'",['xp'],null,null);  
  34.              //});  
  35.             //查詢數據庫  
  36.             db.transaction(function(tx) {  
  37.                 tx.executeSql("SELECT * FROM test", [],  
  38.                     function(tx, result) {  
  39.                         for (var i = 0; i < result.rows.length; i++) {  
  40.                             document.write('<b>' + result.rows.item(i)['mytitle'] + '</b><br />');  
  41.                         }  
  42.                     }, function() {  
  43.                         alert("error");  
  44.                     });  
  45.             });  
  46.         </script>  
  47.     </body>  
  48.   
  49. </html>  

          綜上爲HTML5對本地存儲的一些基本知識。

 

          三，新的網絡連接緩存：HTML5通過創建cache manifest 文件，可以輕鬆地創建 web 應用的離線版本。除了IE，其它瀏覽器都已經支持。對於手機有非常大的優勢，例如我們一次下載好的遊戲，可以離線玩，等有網了再進行數據同步等。優勢：

離線瀏覽- 用戶可在應用離線時使用它們

速度 -已緩存資源加載得更快

減少服務器負載- 瀏覽器將只從服務器下載更新過或更改過的資源。

 

         做法也是比較簡單，具體沒試驗，大家可以試試，在manifest文件中添加我們想要緩存的文件名即可。


          好，綜上爲簡單的擴展，我們可以通過網絡上資料慢慢深化。當然了這裏只是擴展了一部分，HTML5還有很多值得我們學習的地方。需要在不斷中慢慢積累。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

PHP 代碼行數統計

<?php // 行數 $line = 0; // 需要統計的文件類型 $arr = array("php", "html", "css", "js"); // 過濾的文件夾 $filtering = array("ui", "dist

avenjan 2020-07-08 12:38:08

慎用PHP $_REQUEST數組

我平時總是喜歡用$_REQUEST這個數組，不是因爲別的，簡單，而且想用GET時候就用GET直接測試即可。還可以把URL打出來，很是方便。從而很少用$_GET和$_POST超全局變量。 不過，從今以後我會盡量不再使用$_REQUEST

二两天涯 2020-07-08 12:16:43

php函數名前面加@是何意

一、、、、@ 運算符只對表達式有效。對新手來說一個簡單的規則就是：如果能從某處得到值，就能在它前面加上 @ 運算符。例如，可以把它放在變量，函數和 include() 調用，常量，等等之前。不能把它放在函數或類的定義之前，也不能用於條件

二两天涯 2020-07-08 12:16:42

PHP和Javascript的JSON交互（處理一個二維數組）(轉)

xmphoenix 2020-07-08 12:00:47

php,checkbox多選框上傳失敗

用慣java和其他語言的時候，表單上傳只需要checkbox的name相同的時候就可以上傳了 <input type="checkbox" name="checkbox" value="1"> 選項1 <input type="c

阿冰介 2020-07-08 11:48:15

php中的&&運算符

今天看discuz源碼，在一個函數裏發現這麼個語句: http:// $output && print($ret); 其中$output是這個函數的一個參數，值爲true或false;$ret是一個字符串. 測試了一下，如果$output

yangmingysc 2020-07-08 11:45:39

php+mysql存儲html文件

$fileContent = trim($fileContent); $fileContent=$queueList->characet($fileContent);

moliyiran 2020-07-08 11:15:53

php+go實現grpc

1.先安裝編譯器:https://github.com/google/protobuf/releases把bin下的exe放到環境PATH目錄。做成環境變量. 2.獲取go支持庫的插件: // gRPC運行時接口編解碼支持庫 g

moliyiran 2020-07-08 11:15:42

Linux中PHP鏈接擴展.so動態庫

前幾天的一個實驗中涉及到使用PHP將本地文件部署到雲端，但是具體的實現卻還是需要費一番手腳，在網上找到的資料很多都沒辦法解決我自己遇到的實際困難，因此記錄下來僅供參考。 1、初始 我使用的雲端服務器是CentOS7.6，PHP版本是PHP

寒. 2020-07-08 11:14:55

PHP之TRUE與FALSE總結

以下代碼主要用於測試PHP中進行條件判斷時各種情況。 <?php /** * the file use to test all kinds of true and false. */ class Sample { public f

taotaoyouarebaby 2020-07-08 11:05:39

PHP配置使PHP在頁面中支持輸出內容

解決辦法： 找到系統中php.ini文件編輯，查找short_open_tag關鍵字，並將其設置爲：short_open_tag = On 注：需要找到short_open_tag = xx片段，可能會找到描述片段，修改並不起

念旧丶 2020-07-08 11:00:42

php操作xml最快的速度學習

做分享做總結 不多嗶嗶，直接上代碼：掌握php如何通過dom對象創建xml文件，php如何讀取xml及如何讀取xml文件，獲取到讀取的xml對象就可以直接操作了  <?php /** * Created by PhpStorm. *

jacklin_001 2020-07-08 10:52:26

wordpress數據字典

1.wordpress數據字典： 1.wp_categories: 用於保存分類相關信息的表。包括了5個字段，分別是: cat_ID – 每個分類唯一的ID號，爲一個bigint(20)值，且帶有附加屬性au

incloud_anke 2020-07-08 10:22:11

linux下面安裝php xdebug擴展

1.在框架裏經常會遇到debug模式！開啓選項就可以通過日誌文件快速的定位到問題 在win下面通過集成的開發包比如phpstudy就可以很容易的安裝xdebug的擴展 2.在linux下面就要通過編譯安裝來實現xde

incloud_anke 2020-07-08 10:22:10

wordpress rest api插件使用

1.wordpress rest api 插件下載： https://wordpress.org/plugins/rest-api/ 2.將下載的包解壓到wp-content/plugins目錄下 3.刷新後

incloud_anke 2020-07-08 10:22:10