HTML5关键知识点之地理位置API实战与本地存储需求剖析

HTML5关键知识点之地理位置API实战与本地存储需求剖析

大家好！写这篇文章是希望能和大家一起学习HTML5的相关知识，共同进步。下面我们来梳理一下其中的知识点。

一、知识点总结

1. geo.js库中获取位置信息的回调函数：getCurrentPosition()方法接受两个回调函数，成功获取位置信息时调用第一个，参数包含位置信息；获取失败时调用第二个，无需参数。
2. 利用geo.js实现获取位置并展示在地图上的实例：页面载入时调用geo_position_js.init()检测设备是否支持地理位置API。支持的话设置链接，点击链接调用lookup_location()函数，该函数调用getCurrentPosition()方法。获取成功调用show_map()函数，利用Google地图API在页面嵌入地图展示位置；获取失败调用show_map_error()函数显示提示信息。
3. geo.js的局限性：geo.js目前不支持watchPosition()方法，若要实时获取位置信息，需定时调用getCurrentPosition()方法。
4. 地理位置API相关资源：文中列举了多种地理位置API的链接，包括W3C地理位置API、Gears以及不同手机平台（如BlackBerry、Nokia、Palm、OMTP BONDI）的地理位置API和封装地理位置API的脚本geo.js。
5. Web应用本地存储的发展及现状：本地客户端应用在持久化本地存储方面有优势，数据以键/值对存储，必要时可搭建数据库等。而Web应用早期的cookie存在诸多问题，如影响传输速度、不安全、存储空间小，我们需要更理想的本地存储方式。

二、通俗讲解

1. geo.js的回调函数：重点来啦！用geo.js获取位置信息时，getCurrentPosition()方法就像一个小助手，它带着两个小伙伴。获取成功时，第一个小伙伴（回调函数）就带着位置信息闪亮登场；要是获取失败，第二个小伙伴就出来告诉我们“找不到位置”，而且它不需要任何信息就能工作。
2. 获取位置并展示在地图上的实例：当我们打开一个页面，它会先看看设备能不能获取位置信息，这就是geo_position_js.init()在做的事。如果可以，页面上会出现一个链接，点击它就能获取位置。获取成功的话，就会用Google地图API把地图“搬”到页面上，还会在地图上标记出位置；要是没获取成功，页面就会显示“无法确定位置”的提示。
3. geo.js的局限性：geo.js虽然好用，但它有个小缺点，就是不支持watchPosition()方法。要是想一直实时知道位置变化，就只能定时让getCurrentPosition()方法去“问问”位置信息了。
4. 地理位置API相关资源：文章里给我们找了好多学习地理位置API的“宝藏”链接，有W3C标准的，有Google的Gears，还有不同手机平台自己的API，以及整合这些API的geo.js，大家要是想深入了解可以去看看。
5. Web应用本地存储：本地客户端应用存储数据很方便，Web应用以前靠cookie存储，但cookie问题不少，又慢又不安全，空间还小。我们现在想要一种更好的本地存储方式，能存更多数据，存在客户端，页面刷新也不会丢，还不会总传给服务器。

三、知识点表格总结

知识点	详情
geo.js回调函数	getCurrentPosition()成功时，回调函数带位置信息；失败时，回调函数无参数
获取位置并展示实例	页面载入检测支持性，点击链接获取位置，成功用Google地图展示，失败显示提示
geo.js局限性	不支持watchPosition()方法，实时获取位置需定时调用getCurrentPosition()
地理位置API资源	W3C、Gears及不同手机平台地理位置API，geo.js脚本
Web应用本地存储	本地客户端应用存储有优势，Web应用早期cookie有缺陷，需更好存储方式

写作不易，希望这篇文章能帮助大家更好地理解HTML5的这些知识。要是觉得有用，麻烦大家点赞、评论，也请关注我的博客，后续会分享更多干货！