html5缓存图片路径,HTML5缓存和GPS定位

HTML5缓存

我们在访问 站的时候，会从 站服务器中下载很多数据，其中包括css文件、图片文件、js文件、音频文件等等，有时候一个页面这种零零散散的文件就要下载上百个，可以打开浏览器的开发者工具，点击Network就可以看到这些数据的下载：

openDatabase() 方法对应的五个参数说明：

1.数据库名称

2.版本

3.描述数据库的文本

4.数据库大小

5.创建回调方法

第五个参数，创建回调方法会在创建数据库后被调用，不过我在示例用没有使用第五个参数。

创建好数据库后，使用数据库对象，调用transaction方法，开启事务，并在此方法中调用executeSql方法执行sql语句来创建一个数据库表格：

表格创建好了，可以插入几条数据看看，同样的还是使用executeSql方法，只不过创建的那句代码就得注释掉了，不然又会创建一次：

以上插入数据没有使用主键，因为在websql没有主键，只能使用唯一索引来充当主键，示例：

接下来演示一下如何查询数据，除了需要写select语句外，还需要写一个回调方法，在回调方法中将数据打印出来，获取数据的方式和遍历数组拿取数据差不多：

代码示例：

删除数据示例：

更新数据示例：

以上就是关于websql的简单介绍。

思维导图：

运行结果：

添加进去的数据

除了以上这种使用函数的方式去添加或得到数据之外，还可以直接使用localStorage来添加或取值：

代码示例：

clear代码示例：

sessionStorage

sessionStorage 方法是针对一个 session 进行数据存储，而且不像localStorage那样没有时间限制。当用户关闭浏览器窗口后，数据就会被删除。

sessionStorage 的使用方式基本上和localStorage是一样的，除了时间限制和存储方式外，但其中的函数使用是一致的，同样的有两种添加和获得数据的方式。

添加和获得数据的代码示例：

清空数据代码示例：

运行结果，可以看到是无法打印数据的：

运行结果：

从运行结果可以看到使用超链接的方式来跳转到新的页面就还可以使用sessionStorage存储的数据，以上就是关于sessionStorage的使用方式介绍。

思维导图：

接下来做个实验，看看能不能缓存文件：

这就是如何使用html5中的应用缓存的简单介绍。

GPS定位

在html5中有一个Geolocation API，这个API用于通过GPS获得用户的地理位置，也就是俗称的GPS定位。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

需要通过getCurrentPosition() 方法来获得用户的位置，这个方法有两个参数，第一个用于执行获得地理位置的代码，第二个参数用来处理错误。它规定当获取用户位置失败时运行的函数。

代码示例：

运行结果：

浏览器会询问是否允许定位，点击不允许的话会抛出一个错误对象，然后执行错误处理函数进行相应的处理：

手机上也可以定位：

运行结果：

相关资源：蓦然记忆助手2.0触屏加强版-管理软件工具类资源-CSDN文库