H5 缓存机制浅析 - 移动端 Web 加载性能优化
本文转载于：http://www.javashuo.com/article/p-ydaqgwhq-e.html
1. H5 缓存机制介绍
H5，即 HTML5，是新一代的 HTML 标准，加入不少新的特性。离线存储（也可称为缓存机制）是其中一个很是重要的特性。H5 引入的离线存储，这意味着 web 应用可进行缓存，并可在没有因特网链接时进行访问。javascript
H5 应用程序缓存为应用带来三个优点：css
-
离线浏览 用户可在应用离线时使用它们html
-
速度 已缓存资源加载得更快前端
-
减小服务器负载 浏览器将只从服务器下载更新过或更改过的资源。html5
根据标准，到目前为止，H5 一共有6种缓存机制，有些是以前已有，有些是 H5 才新加入的。java
-
浏览器缓存机制web
-
Dom Storgage（Web Storage）存储机制sql
-
Web SQL Database 存储机制数据库
-
Application Cache（AppCache）机制segmentfault
-
Indexed Database （IndexedDB）
-
File System API
下面咱们首先分析各类缓存机制的原理、用法及特色；而后针对 Anroid 移动端 Web 性能加载优化的需求，看若是利用适当缓存机制来提升 Web 的加载性能。
2. H5 缓存机制原理分析
2.1 浏览器缓存机制
浏览器缓存机制是指经过 HTTP 协议头里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段来控制文件缓存的机制。这应该是 WEB 中最先的缓存机制了，是在 HTTP 协议中实现的，有点不一样于 Dom Storage、AppCache 等缓存机制，但本质上是同样的。能够理解为，一个是协议层实现的，一个是应用层实现的。
Cache-Control 用于控制文件在本地缓存有效时长。最多见的，好比服务器回包：Cache-Control:max-age=600 表示文件在本地应该缓存，且有效时长是600秒（从发出请求算起）。在接下来600秒内，若是有请求这个资源，浏览器不会发出 HTTP 请求，而是直接使用本地缓存的文件。
Last-Modified 是标识文件在服务器上的最新更新时间。下次请求时，若是文件缓存过时，浏览器经过 If-Modified-Since 字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。若是没有修改，服务器返回304告诉浏览器继续使用缓存；若是有修改，则返回200，同时返回最新的文件。
Cache-Control 一般与 Last-Modified 一块儿使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。
Cache-Control 还有一个同功能的字段：Expires。Expires 的值一个绝对的时间点，如：Expires: Thu, 10 Nov 2015 08:45:11 GMT，表示在这个时间点以前，缓存都是有效的。
Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1 标准中新加的字段，功能同样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control 是高优化级的。
Etag 也是和 Last-Modified 同样，对文件进行标识的字段。不一样的是，Etag 的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器经过 If-None-Match 字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag 和 Last-Modified 可根据需求使用一个或两个同时使用。两个同时使用时，只要知足基中一个条件，就认为文件没有更新。
另外有两种特殊的状况：
-
手动刷新页面（F5)，浏览器会直接认为缓存已通过期（可能缓存尚未过时），在请求中加上字段：
Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。 -
强制刷新页面（Ctrl+F5)，浏览器会直接忽略本地的缓存（有缓存也会认为本地没有缓存），在请求中加上字段：
Cache-Control:no-cache（或Pragma:no-cache），发包向服务从新拉取文件。
下面是经过 Google Chrome 浏览器（用其余浏览器+抓包工具也能够）自带的开发者工具，对一个资源文件不一样状况请求与回包的截图。
首次请求：200
缓存有效期内请求：200(from cache)
缓存过时后请求：304（Not Modified)
通常浏览器会将缓存记录及缓存文件存在本地 Cache 文件夹中。Android 下 App 若是使用 Webview，缓存的文件记录及文件内容会存在当前 app 的 data 目录中。
分析：Cache-Control 和 Last-Modified 通常用在 Web 的静态资源文件上，如 JS、CSS 和一些图像文件。经过设置资源文件缓存属性，对提升资源文件加载速度，节省流量颇有意义，特别是移动网络环境。但问题是：缓存有效时长该如何设置？若是设置过短，就起不到缓存的使用；若是设置的太长，在资源文件有更新时，浏览器若是有缓存，则不能及时取到最新的文件。
Last-Modified 须要向服务器发起查询请求，才能知道资源文件有没有更新。虽然服务器可能返回304告诉没有更新，但也还有一个请求的过程。对于移动网络，这个请求多是比较耗时的。有一种说法叫“消灭304”，指的就是优化掉304的请求。
抓包发现，带 if-Modified-Since 字段的请求，若是服务器回包304，回包带有 Cache-Control:max-age 或 Expires 字段，文件的缓存有效时间会更新，就是文件的缓存会从新有效。304回包后若是再请求，则又直接使用缓存文件了，再也不向服务器查询文件是否更新了，除非新的缓存时间再次过时。
另外，Cache-Control 与 Last-Modified 是浏览器内核的机制，通常都是标准的实现，不能更改或设置。以 QQ 浏览器的 X5为例，Cache-Control 与 Last-Modified 缓存不能禁用。缓存容量是12MB，不分HOST，过时的缓存会最早被清除。若是都没过时，应该优先清最先的缓存或最快到期的或文件大小最大的；过时缓存也有可能仍是有效的，清除缓存会致使资源文件的从新拉取。
还有，浏览器，如 X5，在使用缓存文件时，是没有对缓存文件内容进行校验的，这样缓存文件内容被修改的可能。
分析发现，浏览器的缓存机制还不是很是完美的缓存机制。完美的缓存机制应该是这样的：
-
缓存文件没更新，尽量使用缓存，不用和服务器交互；
-
缓存文件有更新时，第一时间能使用到新的文件；
-
缓存的文件要保持完整性，不使用被修改过的缓存文件；
-
缓存的容量大小要能设置或控制，缓存文件不能由于存储空间限制或过时被清除。
以X5为例，第一、2条不能同时知足，第三、4条都不能知足。
在实际应用中，为了解决 Cache-Control 缓存时长很差设置的问题，以及为了”消灭304“，Web前端采用的方式是：
-
在要缓存的资源文件名中加上版本号或文件 MD5值字串，如 common.d5d02a02.js，common.v1.js，同时设置 Cache-Control:max-age=31536000，也就是一年。在一年时间内，资源文件若是本地有缓存，就会使用缓存；也就不会有304的回包。
-
若是资源文件有修改，则更新文件内容，同时修改资源文件名，如 common.v2.js，html页面也会引用新的资源文件名。
经过这种方式，实现了：缓存文件没有更新，则使用缓存；缓存文件有更新，则第一时间使用最新文件的目的。即上面说的第一、2条。第三、4条因为浏览器内部机制，目前还没法知足。
2.2 Dom Storage 存储机制
DOM 存储是一套在 Web Applications 1.0 规范中首次引入的与存储相关的特性的总称，如今已经分离出来，单独发展成为独立的 W3C Web 存储规范。 DOM 存储被设计为用来提供一个更大存储量、更安全、更便捷的存储方法，从而能够代替掉将一些不须要让服务器知道的信息存储到 cookies 里的这种传统方法。
上面一段是对 Dom Storage 存储机制的官方表述。看起来，Dom Storage 机制相似 Cookies，但有一些优点。
Dom Storage 是经过存储字符串的 Key/Value 对来提供的，并提供 5MB （不一样浏览器可能不一样，分 HOST)的存储空间（Cookies 才 4KB)。另外 Dom Storage 存储的数据在本地，不像 Cookies，每次请求一次页面，Cookies 都会发送给服务器。
DOM Storage 分为 sessionStorage 和 localStorage。localStorage 对象和 sessionStorage 对象使用方法基本相同，它们的区别在于做用的范围不一样。sessionStorage 用来存储与页面相关的数据，它在页面关闭后没法使用。而 localStorage 则持久存在，在页面关闭后也可使用。
Dom Storage 提供了如下的存储接口：
interface Storage { readonly attribute unsigned long length; [IndexGetter] DOMString key(in unsigned long index); [NameGetter] DOMString getItem(in DOMString key); [NameSetter] void setItem(in DOMString key, in DOMString data); [NameDeleter] void removeItem(in DOMString key); void clear(); };
sessionStorage 是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着，页面会话周期就会一直持续。当页面从新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。每在新标签或者新窗口中打开一个新页面，都会初始化一个新的会话。
<script type="text/javascript"> // 当页面刷新时，从sessionStorage恢复以前输入的内容 window.onload = function(){ if (window.sessionStorage) { var name = window.sessionStorage.getItem("name"); if (name != "" || name != null){ document.getElementById("name").value = name; } } }; // 将数据保存到sessionStorage对象中 function saveToStorage() { if (window.sessionStorage) { var name = document.getElementById("name").value; window.sessionStorage.setItem("name", name); window.location.href="session_storage.html"; } } </script> <form action="./session_storage.html"> <input type="text" name="name" id="name"/> <input type="button" value="Save" onclick="saveToStorage()"/> </form>
当浏览器被意外刷新的时候，一些临时数据应当被保存和恢复。sessionStorage 对象在处理这种状况的时候是最有用的。好比恢复咱们在表单中已经填写的数据。
把上面的代码复制到 session_storage.html（也能够从附件中直接下载）页面中，用 Google Chrome 浏览器的不一样 PAGE 或 WINDOW 打开，在输入框中分别输入不一样的文字，再点击“Save”，而后分别刷新。每一个 PAGE 或 WINDOW 显示都是当前PAGE输入的内容，互不影响。关闭 PAGE，再从新打开，上一次输入保存的内容已经没有了。
Local Storage 的接口、用法与 Session Storage 同样，惟一不一样的是：Local Storage 保存的数据是持久性的。当前 PAGE 关闭（Page Session 结束后），保存的数据依然存在。从新打开PAGE，上次保存的数据能够获取到。另外，Local Storage 是全局性的，同时打开两个 PAGE 会共享一份存数据，在一个PAGE中修改数据，另外一个 PAGE 中是能够感知到的。
<script> //经过localStorage直接引用key, 另外一种写法，等价于： //localStorage.getItem("pageLoadCount"); //localStorage.setItem("pageLoadCount", value); if (!localStorage.pageLoadCount) localStorage.pageLoadCount = 0; localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1; document.getElementById('count').textContent = localStorage.pageLoadCount; </script> <p> You have viewed this page <span id="count">an untold number of</span> time(s). </p>
将上面代码复制到 local_storage.html 的页面中，用浏览器打开，pageLoadCount 的值是1；关闭 PAGE 从新打开，pageLoadCount 的值是2。这是由于第一次的值已经保存了。
用两个 PAGE 同时打开 local_storage.html，并分别交替刷新，发现两个 PAGE 是共享一个 pageLoadCount 的。
分析：Dom Storage 给 Web 提供了一种更录活的数据存储方式，存储空间更大（相对 Cookies)，用法也比较简单，方便存储服务器或本地的一些临时数据。
从 DomStorage 提供的接口来看，DomStorage 适合存储比较简单的数据，若是要存储结构化的数据，可能要借助 JASON了，将要存储的对象转为 JASON 字串。不太适合存储比较复杂或存储空间要求比较大的数据，也不适合存储静态的文件等。
在 Android 内嵌 Webview 中，须要经过 Webview 设置接口启用 Dom Storage。
WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myWebView.getSettings(); webSettings.setDomStorageEnabled(true);
拿 Android 类比的话，Web 的 Dom Storage 机制相似于 Android 的 SharedPreference 机制。
2.3 Web SQL Database存储机制
H5 也提供基于 SQL 的数据库存储机制，用于存储适合数据库的结构化数据。根据官方的标准文档，Web SQL Database 存储机制再也不推荐使用，未来也再也不维护，而是推荐使用 AppCache 和 IndexedDB。
如今主流的浏览器（点击查看浏览器支持状况）都仍是支持 Web SQL Database 存储机制的。Web SQL Database 存储机制提供了一组 API 供 Web App 建立、存储、查询数据库。
下面经过简单的例子，演示下 Web SQL Database 的使用。
<script> if(window.openDatabase){ //打开数据库，若是没有则建立 var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024); //经过事务，建立一个表，并添加两条记录 db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); }); //查询表中全部记录，并展现出来 db.transaction(function (tx) { tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>Found rows: " + len + "</p>"; for(i=0; i<len; i++){ msg += "<p>" + results.rows.item(i).log + "</p>"; } document.querySelector('#status').innerHTML = msg; }, null); }); } </script> <div id="status" name="status">Status Message</div>
将上面代码复制到 sql_database.html 中，用浏览器打开，可看到下面的内容。
官方建议浏览器在实现时，对每一个 HOST 的数据库存储空间做必定限制，建议默认是 5MB（分 HOST）的配额；达到上限后，能够申请更多存储空间。另外，如今主流浏览器 SQL Database 的实现都是基于 SQLite。
分析：SQL Database 的主要优点在于可以存储结构复杂的数据，能充分利用数据库的优点，可方便对数据进行增长、删除、修改、查询。因为 SQL 语法的复杂性，使用起来麻烦一些。SQL Database 也不太适合作静态文件的缓存。
在 Android 内嵌 Webview 中，须要经过 Webview 设置接口启用 SQL Database，同时还要设置数据库文件的存储路径。
WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myWebView.getSettings(); webSettings.setDatabaseEnabled(true); final String dbPath = getApplicationContext().getDir("db", Context.MODE_PRIVATE).getPath(); webSettings.setDatabasePath(dbPath);
Android 系统也使用了大量的数据库用来存储数据，好比联系人、短消息等；数据库的格式也 SQLite。Android 也提供了 API 来操做 SQLite。Web SQL Database 存储机制就是经过提供一组 API，借助浏览器的实现，将这种 Native 的功能提供给了 Web App。
2.4 Application Cache 机制
Application Cache（简称 AppCache)彷佛是为支持 Web App 离线使用而开发的缓存机制。它的缓存机制相似于浏览器的缓存（Cache-Control 和 Last-Modified）机制，都是以文件为单位进行缓存，且文件有必定更新机制。但 AppCache 是对浏览器缓存机制的补充，不是替代。
先拿 W3C 官方的一个例子，说下 AppCache 机制的用法与功能。
<!DOCTYPE html> <html manifest="demo_html.appcache"> <body> <script src="demo_time.js"></script> <p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p> <p><img src="img_logo.gif" width="336" height="69"></p> <p>Try opening <a href="tryhtml5_html_manifest.htm" target="_blank">this page</a>, then go offline, and reload the page. The script and the image should still work.</p> </body> </html>
上面 HTML 文档，引用外部一个 JS 文件和一个 GIF 图片文件，在其 HTML 头中经过 manifest 属性引用了一个 appcache 结尾的文件。
咱们在 Google Chrome 浏览器中打开这个 HTML 连接，JS 功能正常，图片也显示正常。禁用网络，关闭浏览器从新打开这个连接，发现 JS 工做正常，图片也显示正常。固然也有多是浏览缓存起的做用，咱们能够在文件的浏览器缓存过时后，禁用网络再试，发现 HTML 页面也是正常的。
经过 Google Chrome 浏览器自带的工具，咱们能够查看已经缓存的 AppCache（分 HOST)。
上面截图中的缓存，就是咱们刚才打开 HTML 的页面 AppCache。从截图中看，HTML 页面及 HTML 引用的 JS、GIF 图像文件都被缓存了；另外 HTML 头中 manifest 属性引用的 appcache 文件也缓存了。
AppCache 的原理有两个关键点：manifest 属性和 manifest 文件。
HTML 在头中经过 manifest 属性引用 manifest 文件。manifest 文件，就是上面以 appcache 结尾的文件，是一个普通文件文件，列出了须要缓存的文件。
上面截图中的 manifest 文件，就 HTML 代码引用的 manifest 文件。文件比较简单，第一行是关键字，第2、三行就是要缓存的文件路径（相对路径）。这只是最简单的 manifest 文件，完整的还包括其余关键字与内容。引用 manifest 文件的 HTML 和 manifest 文件中列出的要缓存的文件最终都会被浏览器缓存。
完整的 manifest 文件，包括三个 Section，类型 Windows 中 ini 配置文件的 Section，不过不要中括号。
-
CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time
-
NETWORK - Files listed under this header require a connection to the server, and will never be cached
-
FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible
完整的 manifest 文件，如：
CACHE MANIFEST
# 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
总的来讲，浏览器在首次加载 HTML 文件时，会解析 manifest 属性，并读取 manifest 文件，获取 Section：CACHE MANIFEST 下要缓存的文件列表，再对文件缓存。
AppCache 的缓存文件，与浏览器的缓存文件分开存储的，仍是一份？应该是分开的。由于 AppCache 在本地也有 5MB（分 HOST）的空间限制。
AppCache 在首次加载生成后，也有更新机制。被缓存的文件若是要更新，须要更新 manifest 文件。由于浏览器在下次加载时，除了会默认使用缓存外，还会在后台检查 manifest 文件有没有修改（byte by byte)。发现有修改，就会从新获取 manifest 文件，对 Section：CACHE MANIFEST 下文件列表检查更新。manifest 文件与缓存文件的检查更新也遵照浏览器缓存机制。
如用用户手动清了 AppCache 缓存，下次加载时，浏览器会从新生成缓存，也可算是一种缓存的更新。另外， Web App 也可用代码实现缓存更新。
分析：AppCache 看起来是一种比较好的缓存方法，除了缓存静态资源文件外，也适合构建 Web 离线 App。在实际使用中有些须要注意的地方，有一些能够说是”坑“。
-
要更新缓存的文件，须要更新包含它的 manifest 文件，那怕只加一个空格。经常使用的方法，是修改 manifest 文件注释中的版本号。如：# 2012-02-21 v1.0.0
-
被缓存的文件，浏览器是先使用，再经过检查 manifest 文件是否有更新来更新缓存文件。这样缓存文件可能用的不是最新的版本。
-
在更新缓存过程当中，若是有一个文件更新失败，则整个更新会失败。
-
manifest 和引用它的HTML要在相同 HOST。
-
manifest 文件中的文件列表，若是是相对路径，则是相对 manifest 文件的相对路径。
-
manifest 也有可能更新出错，致使缓存文件更新失败。
-
没有缓存的资源在已经缓存的 HTML 中不能加载，即便有网络。例如：http://appcache-demo.s3-website-us-east-1.amazonaws.com/without-network/
-
manifest 文件自己不能被缓存，且 manifest 文件的更新使用的是浏览器缓存机制。因此 manifest 文件的 Cache-Control 缓存时间不能设置太长。
另外，根据官方文档，AppCache 已经不推荐使用了，标准也不会再支持。如今主流的浏览器都是还支持 AppCache的，之后就不太肯定了。
在Android 内嵌 Webview中，须要经过 Webview 设置接口启用 AppCache，同时还要设置缓存文件的存储路径，另外还能够设置缓存的空间大小。
WebView myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myWebView.getSettings(); webSettings.setAppCacheEnabled(true); final String cachePath = getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath(); webSettings.setAppCachePath(cachePath); webSettings.setAppCacheMaxSize(5*1024*1024);
2.5 Indexed Database
IndexedDB 也是一种数据库的存储机制，但不一样于已经再也不支持的 Web SQL Database。IndexedDB 不是传统的关系数据库，可归为 NoSQL 数据库。IndexedDB 又相似于 Dom Storage 的 key-value 的存储方式，但功能更强大，且存储空间更大。
IndexedDB 存储数据是 key-value 的形式。Key 是必需，且要惟一；Key 能够本身定义，也可由系统自动生成。Value 也是必需的，但 Value 很是灵活，能够是任何类型的对象。通常 Value 都是经过 Key 来存取的。
IndexedDB 提供了一组 API，能够进行数据存、取以及遍历。这些 API 都是异步的，操做的结果都是在回调中返回。
下面代码演示了 IndexedDB 中 DB 的打开（建立）、存储对象(可理解成有关系数据的”表“）的建立及数据存取、遍历基本功能。
<script type="text/javascript"> var db; window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; //浏览器是否支持IndexedDB if (window.indexedDB) { //打开数据库，若是没有，则建立 var openRequest = window.indexedDB.open("people_db", 1); //DB版本设置或升级时回调 openRequest.onupgradeneeded = function(e) { console.log("Upgrading..."); var thisDB = e.target.result; if(!thisDB.objectStoreNames.contains("people")) { console.log("Create Object Store: people."); //建立存储对象，相似于关系数据库的表 thisDB.createObjectStore("people", { autoIncrement:true }); //建立存储对象， 还建立索引 //var objectStore = thisDB.createObjectStore("people",{ autoIncrement:true }); // //first arg is name of index, second is the path (col); //objectStore.createIndex("name","name", {unique:false}); //objectStore.createIndex("email","email", {unique:true}); } } //DB成功打开回调 openRequest.onsuccess = function(e) { console.log("Success!"); //保存全局的数据库对象，后面会用到 db = e.target.result; //绑定按钮点击事件 document.querySelector("#addButton").addEventListener("click", addPerson, false); document.querySelector("#getButton").addEventListener("click", getPerson, false); document.querySelector("#getAllButton").addEventListener("click", getPeople, false); document.querySelector("#getByName").addEventListener("click", getPeopleByNameIndex1, false); } //DB打开失败回调 openRequest.onerror = function(e) { console.log("Error"); console.dir(e); } }else{ alert('Sorry! Your browser doesn\'t support the IndexedDB.'); } //添加一条记录 function addPerson(e) { var name = document.querySelector("#name").value; var email = document.querySelector("#email").value; console.log("About to add "+name+"/"+email); var transaction = db.transaction(["people"],"readwrite"); var store = transaction.objectStore("people"); //Define a person var person = { name:name, email:email, created:new Date() } //Perform the add var request = store.add(person); //var request = store.put(person, 2); request.onerror = function(e) { console.log("Error",e.target.error.name); //some type of error handler } request.onsuccess = function(e) { console.log("Woot! Did it."); } } //经过KEY查询记录 function getPerson(e) { var key = document.querySelector("#key").value; if(key === "" || isNaN(key)) return; var transaction = db.transaction(["people"],"readonly"); var store = transaction.objectStore("people"); var request = store.get(Number(key)); request.onsuccess = function(e) { var result = e.target.result; console.dir(result); if(result) { var s = "<p><h2>Key "+key+"</h2></p>"; for(var field in result) { s+= field+"="+result[field]+"<br/>"; } document.querySelector("#status").innerHTML = s; } else { document.querySelector("#status").innerHTML = "<h2>No match!</h2>"; } } } //获取全部记录 function getPeople(e) { var s = ""; db.transaction(["people"], "readonly").objectStore("people").openCursor().onsuccess = function(e) { var cursor = e.target.result; if(cursor) { s += "<p><h2>Key "+cursor.key+"</h2></p>"; for(var field in cursor.value) { s+= field+"="+cursor.value[field]+"<br/>"; } s+="</p>"; cursor.continue(); } document.querySelector("#status2").innerHTML = s; } } //经过索引查询记录 function getPeopleByNameIndex(e) { var name = document.querySelector("#name1").value; var transaction = db.transaction(["people"],"readonly"); var store = transaction.objectStore("people"); var index = store.index("name"); //name is some value var request = index.get(name); request.onsuccess = function(e) { var result = e.target.result; if(result) { var s = "<p><h2>Name "+name+"</h2><p>"; for(var field in result) { s+= field+"="+result[field]+"<br/>"; } s+="</p>"; } else { document.querySelector("#status3").innerHTML = "<h2>No match!</h2>"; } } } //经过索引查询记录 function getPeopleByNameIndex1(e) { var s = ""; var name = document.querySelector("#name1").value; var transaction = db.transaction(["people"],"readonly"); var store = transaction.objectStore("people"); var index = store.index("name"); //name is some value index.openCursor().onsuccess = function(e) { var cursor = e.target.result; if(cursor) { s += "<p><h2>Key "+cursor.key+"</h2></p>"; for(var field in cursor.value) { s+= field+"="+cursor.value[field]+"<br/>"; } s+="</p>"; cursor.continue(); } document.querySelector("#status3").innerHTML = s; } } </script> <p>添加数据