Home > Developer > Web Develop
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:
<! DOCTYPE html> <body> <p id = "demo"> click this button to obtain your location: </p> <button onclick = "getLocation () "> try </button> <div id =" mapholder "> </div> <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 to display, of course, you can also through Baidu map var img_url = "http://maps.googleapis.com/maps/api/staticmap? Center = "+ latlon +" & zoom = 14 & size = 400x300 & sensor = false "; document. getElementById ("mapholder "). innerHTML = " </body>
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:
<! Doctype html>
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:
<! Doctype html>
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.
How does html5 web storage address local cache?
There is a specification called Application Cache, which specifically solves the problem of local Cache. If you are interested, you can search for related introductions on the Internet.
Reference: Tianyi space application Factory
Where html5 local storage is used
Caching, long-term saving of Temporary Information, offline information, and so on
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
