Basic HTML5 extension-geographic location, local storage, cache, and html5 geographic location

Basic HTML5 extension-geographic location, local storage, cache, and html5 geographic location

HTML5 Extension: next to the last two blogs, let's take a look at some HTML5 extension functions. Because HTML5 is designed to be compatible with computer browsers, Android browsers, and Apple browsers, or provide a unified standard for these browsers. therefore, HTML5 is currently popular in web development on mobile phones. Therefore, these extended functions are more from the perspective of mobile phones and tablets.

 

1. Geographic Positioning: first, let's take a look at the Positioning methods of geographic locations: IP addresses, GPS (Global Positioning System), Wifi, and GSM (Global System for Mobile Communication) /CDMA (Code Division Multiple Access ). Generally, mobile phones are positioned by GPS, which is relatively accurate. Let's take a look at how HTML5 achieves geographical location:

1. Implement the technology of Obtaining users' geographic location based on the browser (without backend Support)

2. Precise positioning of users' geographical locations (with a precision of up to 10 m and dependent on devices)

3. Continuous tracking of users' geographic locations (Real-time location)

4. interact with Google Map or Baidu Map to display location information.

 

HTML5 provides the Geolocation API to share the user's current geographic location information to a trusted site, which involves the user's privacy and security issues. Therefore, when a site needs to obtain the user's current geographic location, the browser will prompt "allow" or "deny ". It provides the following methods:

1. getCurrentPosition // Current Position

2. watchPosition // monitoring position

3. clearWatch // clear monitoring

 

Take a look at the parameters:

The getCurrentPosition (success, error, option) method can have up to three parameters:

The first parameter is the callback function for successfully obtaining location information. It is the only required parameter of the method;

The second parameter is used to capture errors in obtaining location information,

The third parameter is the configuration item.

 

Let's look at an example:

?

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455

<p id="demo"> Click this button to get your location: </p><button onclick="getLocation()"> Try it </button><div id="mapholder"></div> <script>    // Obtain the tag whose id is demo    var x=document.getElementById("demo");    // Call the getLocation function to obtain the location.    function getLocation()      {        // If the browser supports      if (navigator.geolocation)        {        // Obtain the current position. Two functions are passed in: successful and failed.        navigator.geolocation.getCurrentPosition(showPosition,showError);        }        // If not, prompt      else{x.innerHTML="Geolocation is not supported by this browser.";}      }    // The result is obtained successfully. The showPosition function is called.    function showPosition(position)      {        // Obtain the longitude and dimension      var latlon=position.coords.latitude+","+position.coords.longitude;       // Use Google map for display. Of course, you can also use Baidu Map      var img_url="http://maps.googleapis.com/maps/api/staticmap?center="      +latlon+"&zoom=14&size=400x300&sensor=false";      document.getElementById("mapholder").innerHTML=""+img_url+"">display: none;">Loading..." title="Loading images..." src="http://www.2cto.com/statics/images/s_nopic.gif">";      }    // Incorrectly called Function    function showError(error)      {      switch(error.code)         {            // Error 1        case error.PERMISSION_DENIED:          x.innerHTML="User denied the request for Geolocation."          break;          // The location is unavailable.        case error.POSITION_UNAVAILABLE:          x.innerHTML="Location information is unavailable."          break;         // Timeout        case error.TIMEOUT:          x.innerHTML="The request to get user location timed out."          break;          // Location Error        case error.UNKNOWN_ERROR:          x.innerHTML="An unknown error occurred."          break;        }      }</script>

 

In summary, it is easy to understand the simple geographical positioning because it is only learning. More information can be searched through the Internet, which can easily help us develop Mobile Phone Positioning functions.

 

2. Independent Data Storage: It means to store data locally. Due to mobile phone traffic problems, this function is very delicious on the mobile client. Here, let's take a look at the local WEB storage and web SQL database.

1. Local web storage is a windows attribute, including localStorage and sessionStorage. It is easy to distinguish the two from their names. The former is always stored locally, and the latter can only be accompanied by sessions, when the window is closed, it disappears. The usage is basically the same. See localStorage here:

 

Let's take a look at the access method:

 

 

Let's look at an example:

 

?

12345678910111213141516

<script type="text/javascript">    if (localStorage.pagecount) {        localStorage.pagecount = Number(localStorage.pagecount) + 1;    } else {        localStorage.pagecount = 1;    }    document.write("Visits: " + localStorage.pagecount + " time(s).");</script> <P> refresh the page and you will see that the counter is growing. </P> <P> close the browser window and try again. The counter Continues counting. </P>

 

2. web SQL Database: Web SQL Database API is a separate specification instead of an HTML5 specification. It uses a set of APIs to manipulate the client database. This means that a database is installed on the browser, which can add, delete, modify, and query data such as mysql and oracle, but is more powerful than localStorage. Open the browser development tool and we can see:

 

Let's look at an example:

 

?

1234567891011121314151617181920212223242526272829303132333435363738394041424344

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>html5-dataBase</title><script type="text/javascript">    // Create a database    var db = window.openDatabase("mydata", "1.0", "Database description", 20000);     // Window. openDatabase ("Database Name", "version", "database description", database size );    if (db)        alert("Database created! ");     db.transaction(function(tx) {        // Execute the SQL statement to create a table        tx.executeSql("CREATE TABLE test (id int UNIQUE, mytitle TEXT, timestamp REAL)");    });     db.transaction(function(tx) {        // Insert data        tx.executeSql("INSERT INTO test (mytitle, timestamp) values(?, ?)", ["WEB Database", new Date().getTime()], null, null);    });      //db.transaction(function(tx) {     // tx.executeSql("DROP TABLE qqs");     //})      //db.transaction(function(tx) {     // tx.executeSql("update test set mytitle=? where mytitle = "fsafdsaf"",['xp'],null,null);     //});    // Query the database    db.transaction(function(tx) {        tx.executeSql("SELECT * FROM test", [],            function(tx, result) {                for (var i = 0; i < result.rows.length; i++) {                    document.write('<b>' + result.rows.item(i)['mytitle'] + '</b><br>');                }            }, function() {                alert("error");            });    });</script>

 

 

In summary, HTML5 provides some basic knowledge about local storage.

 

3. New Network Connection cache: HTML5 allows you to easily create offline versions of web applications by creating a cache manifest file. Other browsers except IE are supported. It has great advantages for mobile phones. For example, we can play a downloaded game offline and synchronize data when there is a network. Advantages:

Offline browsing-users can use them when the application is offline

Speed-cached resources are loaded faster

Server Load Reduction-the browser will only download updated or changed resources from the server.

 

The practice is also relatively simple. If you haven't tried it, you can try to add the file name we want to cache in the manifest file.

 

Well, in summary, for simple expansion, we can gradually deepen the information on the network. Of course, this is only part of the expansion. HTML5 is worth learning. It is necessary to continue accumulating.