HTML5缓存和GPS定位
HTML5缓存
我们在访问网站的时候，会从网站服务器中下载很多数据，其中包括css文件、图片文件、js文件、音频文件等等，有时候一个页面这种零零散散的文件就要下载上百个，可以打开浏览器的开发者工具，点击Network就可以看到这些数据的下载：
可以看到这个网页请求了172个文件，而且如果这是一个动态网站的话这个数字还会持续增长。所以可以想象一下，如果每次访问网站都需要下载一次这些文件，是不是会给服务器增加更多的压力，需要耗去更多的带宽资源？
因此我们需要将一些不怎么发生变动的静态文件例如图片、css、js文件等等，保存到本地上，下一次再访问网站的时候就可以从本地上直接读取这些文件，不用再去服务器下载一遍了，所以浏览器就有了本地缓存的机制。
在html5中提供了两种在客户端存储数据的新方法localStorage和sessionStorage ，并且html5还支持内嵌在浏览器中的WebSQL数据库，下面就介绍一下这三种存储数据的使用方式。
WebSQL
首先要说明一下，Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 API。Web SQL 数据库只能在最新版的 Safari、Chrome 和 Opera 等浏览器中工作，旧版本的浏览器并不支持。
Web SQL规范中定义了三个核心的方法：
openDatabase
这个方法可以用来创建一个数据库对象，也就是专门用来创建数据库的方法。
transaction
这个方法让我们能够开启并控制一个事务，以及基于这种情况执行提交或者回滚，执行sql语句的方法需要写在这个方法里。
executeSql
这个方法用于执行实际的 SQL 语句。
下面使用实际代码演示一下这几个方法的使用方式：
首先我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：
openDatabase() 方法对应的五个参数说明：
1.数据库名称
2.版本号
3.描述数据库的文本
4.数据库大小
5.创建回调方法
第五个参数，创建回调方法会在创建数据库后被调用，不过我在示例用没有使用第五个参数。
创建好数据库后，使用数据库对象，调用transaction方法，开启事务，并在此方法中调用executeSql方法执行sql语句来创建一个数据库表格：
运行结果，在浏览器中打开开发者工具，可以看到创建好的数据库和表格：
表格创建好了，可以插入几条数据看看，同样的还是使用executeSql方法，只不过创建的那句代码就得注释掉了，不然又会创建一次：
运行结果：
以上插入数据没有使用主键，因为在websql没有主键，只能使用唯一索引来充当主键，示例：
运行结果：
接下来演示一下如何查询数据，除了需要写select语句外，还需要写一个回调方法，在回调方法中将数据打印出来，获取数据的方式和遍历数组拿取数据差不多：
代码示例：
运行结果：
删除数据示例：
运行结果：
更新数据示例：
运行结果：
以上就是关于websql的简单介绍。
思维导图：
localStorage
使用localStorage方法存储的数据没有时间限制，只要没有被清理缓存垃圾的软件清理掉的话，就能一直存储着。localStorage方法的使用方式类似于Java中的hashtable，以键/值对的方式添加数据，添加数据的函数是setItem()，得到数据的函数是getItem()，得数据要用键来获得。
代码示例：
运行结果：
添加进去的数据
打印出来的数据
除了以上这种使用函数的方式去添加或得到数据之外，还可以直接使用localStorage来添加或取值：
代码示例：
运行结果：
删除数据使用removeItem()函数，按键来删除，想要清除localStorage里面的所有数据可以使用clear()函数。
removeItem代码示例：
clear代码示例：
以上就是localStorage使用方式的简单介绍。
思维导图：
sessionStorage
sessionStorage 方法是针对一个 session 进行数据存储，而且不像localStorage那样没有时间限制。当用户关闭浏览器窗口后，数据就会被删除。
sessionStorage 的使用方式基本上和localStorage是一样的，除了时间限制和存储方式外，但其中的函数使用是一致的，同样的有两种添加和获得数据的方式。
添加和获得数据的代码示例：
运行结果：
删除数据代码示例：
清空数据代码示例：
sessionStorage存储的数据只能存储在当前窗口，如果打开一个新的窗口的话就数据就无效了。例如我使用一个新的窗口进行打印数据，看看是否能够打印出已经添加数据。
代码示例：
运行结果，可以看到是无法打印数据的：
如果想要另一个窗口也能使用sessionStorage存储的数据的话，可以使用超级链接的方式进行跳转到另一个页面，这样就能够打印出数据了，代码示例：
运行结果：
从运行结果可以看到使用超链接的方式来跳转到新的页面就还可以使用sessionStorage存储的数据，以上就是关于sessionStorage的使用方式介绍。
思维导图：
4. 应用缓存
在HTML5中引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
1.离线浏览 - 用户可在应用离线时使用它们
2.速度 - 已缓存资源加载得更快
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
像Android、ios等手机系统的客户端app，都有这样的一个缓存机制，为了能够让离线状态时也能使用应用的一些功能，像Android还自带了一个SQLite数据库，用来缓存数据，它只是一个后缀为.db的数据库文件，但它支持SQL语句，是一个轻量级数据库。
在html5中如果需要启用应用程序缓存，需要在文档的 <html> 标签中写上 manifest 属性，并指定appcache文件的路径。每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件
manifest 文件是一个扩展名为：".appcache" 的一个简单的文本文件，在这个文件里指定需要被缓存的内容，以及不需要缓存的内容。
manifest 文件可分为三个部分：
1.CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
2.NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存，也就是用来指定不需要缓存的内容。
3.FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的，示例：
CACHE MANIFEST
js/hello.js
css/a.css
上面的 manifest 文件列出了两个资源：一个 CSS 文件，一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件，也就是浏览器的缓存目录。然后无论用户何时与网络断开连接，这些资源依然是可用的。
NETWORK
下面的 NETWORK 小节规定文件 "login.jsp" 永远不会被缓存，且离线时是不可用的，也就是说用来指定不被缓存的文件：
NETWORK:
login.jsp
可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:
*
FALLBACK
下面的 FALLBACK 小节规定如果无法建立网络连接，则用 "404.html" 替代工程根目录中的所有文件：
FALLBACK:
/404.html
完整的 Manifest 文件示例：
接下来做个实验，看看能不能缓存文件：
运行结果：
这就是如何使用html5中的应用缓存的简单介绍。
GPS定位
在html5中有一个Geolocation API，这个API用于通过GPS获得用户的地理位置，也就是俗称的GPS定位。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
需要通过getCurrentPosition() 方法来获得用户的位置，这个方法有两个参数，第一个用于执行获得地理位置的代码，第二个参数用来处理错误。它规定当获取用户位置失败时运行的函数。
代码示例：
运行结果：
浏览器会询问是否允许定位，点击不允许的话会抛出一个错误对象，然后执行错误处理函数进行相应的处理：
如果获取地理位置的过程出错了，也会执行错误处理函数，打印出相应的错误类型：
手机上也可以定位：
除此之外还可以调用一些地图API将坐标显示到地图上。
代码示例，我这里调用的是百度地图的API：
运行结果：
转载于:https://blog.51cto.com/zero01/1977522
HTML5缓存和GPS定位相关推荐
- html5新特性 gps,老生常谈H5新特性:地理定位
HTML5新特性 1.新的语义标签 2.表单2.0 3.视频和音频 4.Canvas绘图 5.SVG绘图 6.地理定位 7.拖放API 8.WebWorker 9.WebStorage 10.WebS ...
- html5获取gps坐标,html5获取手机GPS信息的示例代码
html5获取手机GPS信息的示例代码function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCu ...
- HTML5 Geolocation用来定位用户的位置。
HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...
- 高德定位SDK踩坑-高精度模式下获取不到GPS定位（无网络环境）
高德定位SDK踩坑-高精度模式下获取不到GPS定位(无网络环境) 关键字:定位模式 高精度模式 GPS定位 无网络 一句话描述问题:高精度模式在断网环境下不可靠.有几率重复报错或使用缓存定位,不使用G ...
- php调用百度地图定位,php用百度地图API进行IP定位和GPS定位
/** * 根据地理坐标获取国家.省份.城市,及周边数据类(利用百度Geocoding API实现) * 百度密钥获取方法:http://lbsyun.baidu.com/apiconsole/key ...
- HTML5 Geolocation（地理定位）简介
HTML5 Geolocation(地理定位)用于定位用户的位置. 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否 ...
- GPS定位信息的接收
定位信息的接收 通常GPS定位信息接收系统主要由GPS接收天线.变频器.信号通道.微处理器.存储器以及电源等部分组成.由于GPS定位信息内容较少,因此多用RS-232串口将定位信息(NEMA0183语 ...
- Delphi APP 開發入門（五）GPS 定位功能
Delphi APP 開發入門(五)GPS 定位功能 分享: Share on facebookShare on twitterShare on google_plusone_share 閲讀次數:3 ...
- 【错误记录】BLE 蓝牙搜索失效 ( 关闭了 GPS 定位导致的问题 | 蓝牙串口工具推荐 )
文章目录 一.报错信息 二.解决方案 三.蓝牙串口工具推荐 一.报错信息 在手机上使用 BLE 蓝牙搜索功能 , 搜索不到蓝牙设备 ; 这种状态下可以根据蓝牙地址连接蓝牙设备 , 但是无法搜索到该设备 ...
最新文章
- python安装步骤3.7.2-linux环境安装python3.7.2
- 使用noConclict后仍然能够在函数体内继续使用$的方法
- Atom React或前端插件推荐
- clover引导mbr安装黑苹果_安装黑苹果记录（一）
- NavigationView更改菜单icon和title颜色变化效果
- docker-compose下载慢_编写Docker Compose时要注意的五大常见错误
- ubuntu and freesurfer 安装手册
- matlab 识别调试,有关matlab的人脸识别程序，但调试是不成功
- 主播助理的三种常见工作类型
- 使用Opencv2遇到error： C2061 语法错误 标识符dest
- 基于麻雀算法改进的LSTM预测算法-附代码
- Xshell、Xftp免费版本
- IP地址查询接口及调用方法
- java 获取当前时间的时间戳（秒级与毫秒级）
- android webp格式的图片,Android使用webp格式图片的步骤
- linux中怎么生成hwaddr,linux 下 hwaddr 和 macaddr的区别
- 【大连理工大学】计算机专业选修：深度学习2020期末复习
- 三地五中心（ldc(逻辑数据中心）单元化）和容灾
- mysql数据库执行mysqladmin flush-hosts方法
- 网上邻居不能访问问题集锦