Basic HTML5 extension-geographic location, local storage, and Cache

Basic HTML5 extension-geographic location, local storage, and Cache

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:

Click this button to get your location:
Try it<Script> // obtain the tag var x = document whose id is demo. getElementById ("demo"); // getLocation: the function that obtains the location. Click it to call function getLocation () {// if the browser supports if (navigator. geolocation) {// obtain the current location, and pass in the two successful and failed functions navigator. geolocation. getCurrentPosition (showPosition, showError);} // if not, else {x. innerHTML = "Geolocation is not supported by this browser. ";}}// the call is successful. The showPositionfunction showPosition (position) {// gets the longitude and dimension var latlon = position. coords. latitude + "," + position. coords. longpolling; // 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 = "";} // function showError (error) {switch (error. code) {// error 1 case error. PERMISSION_DENIED: x. innerHTML = "User denied the request for Geolocation. "break; // case error is not available for geographic locations. 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:

<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>
Refresh the page and you will see that the counter is growing.
Close the browser window and try again. The counter Continues counting.

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:

 Html5-dataBase<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 successfully! "); Db. transaction (function (tx) {// execute the SQL statement, and CREATE the TABLE tx.exe cuteSql ("CREATE TABLE test (id int UNIQUE, mytitle TEXT, timestamp REAL)");}); db. transaction (function (tx) {// INSERT data tx.exe cuteSql ("insert into test (mytitle, timestamp) values (?, ?) ", [" WEB Database ", new Date (). getTime ()], null, null) ;}; // db. transaction (function (tx) {// tx.exe cuteSql ("drop table qqs"); //}) // db. transaction (function (tx) {// tx.exe cuteSql ("update test set mytitle =? Where mytitle = "fsafdsaf" ", ['xp '], null, null); //}); // query the database. transaction (function (tx) returns tx.exe cuteSql ("SELECT * FROM test", [], function (tx, result) {for (var I = 0; I <result. rows. length; I ++) {document. write (''+ Result. rows. item (I) ['mytitle'] +'
') ;}, 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.