HTML5缓存

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

3927

可以看到这个网页请求了172个文件，而且如果这是一个动态网站的话这个数字还会持续增长。所以可以想象一下，如果每次访问网站都需要下载一次这些文件，是不是会给服务器增加更多的压力，需要耗去更多的带宽资源？

因此我们需要将一些不怎么发生变动的静态文件例如图片、css、js文件等等，保存到本地上，下一次再访问网站的时候就可以从本地上直接读取这些文件，不用再去服务器下载一遍了，所以浏览器就有了本地缓存的机制。

在html5中提供了两种在客户端存储数据的新方法localStorage和sessionStorage ，并且html5还支持内嵌在浏览器中的WebSQL数据库，下面就介绍一下这三种存储数据的使用方式。

  1. WebSQL

首先要说明一下，Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 API。Web SQL 数据库只能在最新版的 Safari、Chrome 和 Opera 等浏览器中工作，旧版本的浏览器并不支持。

Web SQL规范中定义了三个核心的方法：

  1. openDatabase

这个方法可以用来创建一个数据库对象，也就是专门用来创建数据库的方法。

  1. transaction

这个方法让我们能够开启并控制一个事务，以及基于这种情况执行提交或者回滚，执行sql语句的方法需要写在这个方法里。

  1. executeSql

这个方法用于执行实际的 SQL 语句。



下面使用实际代码演示一下这几个方法的使用方式：

首先我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：

3928

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

   1.数据库名称

   2.版本号

   3.描述数据库的文本

   4.数据库大小

   5.创建回调方法

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


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

3929


运行结果，在浏览器中打开开发者工具，可以看到创建好的数据库和表格：

3930

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

3931


运行结果：

3932


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

3933


运行结果：

3934


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

代码示例：

3935


运行结果：

3936


删除数据示例：

3938


运行结果：

3939


更新数据示例：

3940


运行结果：

3941


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


思维导图：

3942





  1. localStorage

使用localStorage方法存储的数据没有时间限制，只要没有被清理缓存垃圾的软件清理掉的话，就能一直存储着。localStorage方法的使用方式类似于Java中的hashtable，以键/值对的方式添加数据，添加数据的函数是setItem()，得到数据的函数是getItem()，得数据要用键来获得。

代码示例：

3943


运行结果：

添加进去的数据

3944









打印出来的数据

3945


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

代码示例：

3946


运行结果：

3947

3948


删除数据使用removeItem()函数，按键来删除，想要清除localStorage里面的所有数据可以使用clear()函数。

removeItem代码示例：

3949


clear代码示例：

3950


以上就是localStorage使用方式的简单介绍。


思维导图：

3951





  1. sessionStorage

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

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

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

3952


运行结果：

3953

3954


删除数据代码示例：

3955


清空数据代码示例：

3956


sessionStorage存储的数据只能存储在当前窗口，如果打开一个新的窗口的话就数据就无效了。例如我使用一个新的窗口进行打印数据，看看是否能够打印出已经添加数据。

代码示例：

3957



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

3958


如果想要另一个窗口也能使用sessionStorage存储的数据的话，可以使用超级链接的方式进行跳转到另一个页面，这样就能够打印出数据了，代码示例：

3959


运行结果：

3960

3961

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


思维导图：

3962



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 文件示例：

3963


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

3964


运行结果：

3965

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




GPS定位

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

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

代码示例：

3966

3967


运行结果：

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

3968

如果获取地理位置的过程出错了，也会执行错误处理函数，打印出相应的错误类型：

3969


手机上也可以定位：

3970

除此之外还可以调用一些地图API将坐标显示到地图上。

代码示例，我这里调用的是百度地图的API：

3971


运行结果：

3972