HTML5 Base Extension-geo-location, local storage, cache

Source: Internet
Author: User
Tags web database


HTML5Extended,following two blog posts,Let's take a look.HTML5some of the extended features,becauseHTML5more to be compatible with the Computer browser,Android Browser,more browsers for Apple browser,or to provide a uniform standard for these browsers,.so the current on the phoneWebDevelopment,HTML5It's more of a fire. Therefore, these extended functions, feel more from the mobile phone, tablet and other points of view.

         One, geo-positioning: First look at the geographical location of several forms:IPaddress,GPS(Global positioning System),Wifi,GSM(Global System for Mobile communication)/CDMA(Code Division multiple Access). General mobile phones are all throughGPSpositioning, relatively accurate. Look good .HTML5How to achieve a geographic location:

1. Enable browser-based (no backend support) to obtain the user's geo-location technology

2. Accurate positioning of the user's geographical location ( accuracy up to 10m , dependent on the device )

3. keep track of the user's location (live location)

4. interact with Google map, or Baidu map to render location information.

HTML5 provide geolocation API , used to share the user's current geo-location information to a trusted site, which involves a user's privacy security issue, so when a site needs to get the user's current location, the browser prompts the user to "Allow"or " deny." The method it provides:

1 , getcurrentposition// Current Position

2 , watchposition// Monitor Location

3 , Clearwatch// Clear Monitoring


Take a look at the parameters:

getcurrentposition (success,error,option) The method can have a maximum of three parameters:

The first parameter is a callback function that successfully obtains the location information, which is the only parameter required by the method;

The second parameter is used to capture the situation where the location information is getting wrong.

The third parameter is a configuration item.


Let's look at an example:

<! DOCTYPE html>

for the simple geographical positioning of the understanding, because just learning, understand the relatively superficial. More information can be network search, very much, it is easy to help us to achieve the mobile phone positioning function development.

Two, independent data storage: The meaning is to store data locally, due to mobile phone traffic problems, this feature in the mobile phone client is very popular. Here's a look at Web Local storage and Web sqldatabase.

1,web Local storage is a Windows the properties, including Local Storage and the Sessionstorage, from the name should easily distinguish between the two, the former has been stored locally, the latter can only accompany with Session , the window is closed and disappears. The usage is basically the same, see localStorage here:


First Look at the method of access:



Good, See an example:


<! DOCTYPE html>

2,web SQL Database:Web SQLDatabaseAPInot actually .HTML5part of the specification, but a separate specification. It passes a set ofAPIto manipulate the client's database. It means that a database is installed to the browser, which can be likeMySQL,Oracleand so on the data to change, just thanLocalStoragemore powerful. Opening the browser's development tool, we can see:


See an example :

<! DOCTYPE html>

The basic knowledge of local storage for HTML5.

Third, new network connection cache:HTML5 You can easily create a Web by creating a cache manifest file > offline version of the app. In addition to IE, other browsers are already supported. For the mobile phone has a very big advantage, such as we download a good game, can play offline, and so on the network and then data synchronization. Advantages:

Offline Browsing-users can use them when the app is offline

Speed-cached resources are loaded faster

Reduce server load-The browser will download only updated or changed resources from the server.

The procedure is also relatively simple, specifically did not experiment, you can try, in the maniFest file to add the filename we want to cache.


Well, for a simple extension, we can deepen the data through the network. Of course, this is just a part of the expansion, and There's a lot of HTML5 to learn from it. Need to accumulate slowly in the continuous.



HTML5 Base Extension-geo-location, local storage, cache

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.