缓存：
------页面缓存: html、JS、CSS等,这些缓存资源是由于浏览器的行为而产生;
------数据缓存
----------AppCache: Cache Manifest 操作； 需要服务器 与 客户端 相互配合； 所有的缓存数据都由开发者直接完全地掌控。
----------DOM Storage（Web Storage）： local storage； session storage； 存储一些简单的用key/value对即可解决的数据
HTML 5 Web 存储
在客户端存储数据
HTML5 提供了两种在客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问 localStorage：
实例
localStorage.lastname="Smith";
localStorage.lastname下面的例子对用户访问页面的次数进行计数：
实例
localStorage.pagecount
localStorage.pagecount
localStorage.pagecount
localStorage.pagecount
sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如何创建并访问一个 sessionStorage：
实例
sessionStorage.lastname="Smith";
sessionStorage.lastname下面的例子对用户在当前 session 中访问页面的次数进行计数：
实例
sessionStorage.pagecount
sessionStorage.pagecount
sessionStorage.pagecount
sessionStorage.pagecount
HTML 5 应用程序缓存
http://www.w3school.com.cn/html5/html_5_app_cache.asp
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存（Application Cache）？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
浏览器支持
所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。
HTML5 Cache Manifest 实例
下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：
实例
manifest="demo.appcache"
Cache Manifest 基础
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
请注意，manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
NETWORK
下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：
NETWORK: login.asp
可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK: *
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：
FALLBACK:
/html5/ /404.html
注释：第一个 URI 是资源，第二个是替补。
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
- 用户清空浏览器缓存
- manifest 文件被修改（参阅下面的提示）
- 由程序来更新应用缓存
实例 - 完整的 Manifest 文件
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
关于应用程序缓存的注释
请留心缓存的内容。
一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。
注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
WebView的缓存可以分为页面缓存和数据缓存。
页面缓存是指加载一个网页时的html、JS、CSS等页面或者资源数据。这些缓存资源是由于浏览器的行为而产生，开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地影响到这些缓存数据。
他们的索引存放在/data/data/package_name/databases下。他们的文件存放在/data/data/package_name/cache/xxxwebviewcachexxx下。文件夹的名字在2.x和4.x上有所不同，但都文件夹名字中都包含webviewcache。
数据缓存分为两种：AppCache和DOM Storage（Web Storage）。他们是因为页面开发者的直接行为而产生。所有的缓存数据都由开发者直接完全地掌控。
AppCache使我们能够有选择的缓冲web浏览器中所有的东西，从页面、图片到脚本、css等等。尤其在涉及到应用于网站的多个页面上的CSS和JavaScript文件的时候非常有用。其大小目前通常是5M。
在Android上需要手动开启（setAppCacheEnabled），并设置路径（setAppCachePath）和容量（setAppCacheMaxSize）
Android中Webkit使用一个db文件来保存AppCache数据（my_path/ApplicationCache.db）
，DOM Storage是非常完美的方案。根据作用范围的不同，有Session Storage和Local Storage两种，分别用于会话级别的存储（页面关闭即消失）和本地化存储（除非主动删除，否则数据永远不会过期）。
在Android中可以手动开启DOM Storage（setDomStorageEnabled），设置存储路径（setDatabasePath）
Android中Webkit会为DOM Storage产生两个文件（my_path/localstorage/http_h5.m.taobao.com_0.localstorage和my_path/localstorage/Databases.db）
另外，在Android中清除缓存时，如果需要清除Local Storage的话，仅仅删除Local Storage的本地存储文件是不够的，内存里面有缓存数据。如果再次进入页面，Local Storage中的缓存数据同样存在。需要杀死程序运行的当前进程再重新启动才可以。
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML5的离线应用功能可以使得WebApp即使在网络断开的情况下仍能正常使用，这是个非常有用的功能。近来工作中也要用到HTML5离线应用功能，由于是在Android平台上做，所以自然而然的选择Webview来解析网页。但如何使Webivew支持HTML5离线应用功能呢，经过反复摸索和上网查找资料，反复做试验终于成功了。
首先需配置webview的的一些属性，假设activity中已经有了一个Webview的实例对象，名为m_webview，然后增加以下代码：
[html] view plain copy
1. WebSettings webseting = m_webview.getSettings();
2. webseting.setDomStorageEnabled(true);
3. webseting.setAppCacheMaxSize(1024*1024*8);//设置缓冲大小，我设的是8M
4. appCacheDir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
5. webseting.setAppCachePath(appCacheDir);
6. webseting.setAllowFileAccess(true);
7. webseting.setAppCacheEnabled(true);
8. webseting.setCacheMode(WebSettings.LOAD_DEFAULT);
webview可以设置一个WebChromeClient对象，在其onReachedMaxAppCacheSize函数对扩充缓冲做出响应。代码如下：
[html] view plain copy
1. m_webview.setWebChromeClient(m_chromeClient);
2. m_chromeClient = new
3. //扩充缓存的容量
4. @Override
5. public void onReachedMaxAppCacheSize(long spaceNeeded,
6. long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
7. quotaUpdater.updateQuota(spaceNeeded * 2);
8. }
9. };
其次要修改http服务器中的配置，使其支持text/cache-manifest，我使用的是apache服务器，是windows版本的，在apache的conf文件夹中找到mime.types文件，打开后在文件的最后加上
“text/cache-manifest mf manifest”，重启服务器即可。这一步很重要，我就是因为服务器端没有配置这个，所以失败了好多次，最后是在附录链接1的回复中找到的线索。
经过以上设置Webview就可以支持HTML5的离线应用了。
附录链接1中说缓冲目录应该是getApplicationContext().getCacheDir().getAbsolutePath();但我经过试验后发现设置那个目录不起作用，可能是Android版本不同吧，我的是Android4.0.3，而他的可能是以前的Android版本吧。
缓冲目录使用getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath()是从附录链接2中找到的线索。
附录链接：
1.http://alex.tapmania.org/2010/11/html5-cache-android-webview.html 2.http://johncookie.iteye.com/blog/1182459 3.HTML5 Offline官方文档：http://www.w3.org/TR/html5/offline.html#manifests
原因：
webview加载 服务端的网页，为了减少访问压力，用html5缓存技术，本地建了数据库，在手机浏览器里 可以显示页面，换成webView就不行了。
解决范例：
Activity code：
[java] view plain copy print ?
1. public class
2. /** Called when the activity is first created. */
3. @Override
4. publicvoidonCreate(Bundle savedInstanceState)
5. {
6. super.onCreate(savedInstanceState);
7. setContentView(R.layout.main);
8. WebView myWebView=(WebView)findViewById(R.id.my_webview);
9. myWebView.setWebViewClient(newWebViewClient());
10. WebSettings settings = myWebView.getSettings();
11. // 开启javascript设置
12. true);
13. // 设置可以使用localStorage
14. true);
15. // 应用可以有数据库
16. true);
17. this.getApplicationContest().getDir("database", Context.MODE_PRIVATE).getPath();
18. settings.setDatabasePath(dbPath);
19. // 应用可以有缓存
20. true);
21. this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
22. settings.setAppCachePath(appCaceDir);
23.
24. "http://10.10.35.47:8080/html5test/test.htm");
25. }
26. }
| |
HTML5 page source code：
[html] view plain copy print ?
1. <htmlmanifesthtmlmanifest="mymanifest.manifest">
2. <head>
3. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html; content="no-cache"charset=utf-8" />
4. <scripttypescripttype="text/javascript"src="js/jquery-1.6.1.min.js"></script>
5.
6. <script>
7. $(document).ready(function(){
8.
9. databaseTest();
10. });
11.
12. function databaseTest(){
13.
14.
15. //open database
16. db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
17.
18. db.transaction(function (tx) {
19. tx.executeSql('CREATE TABLE IF NOT EXISTS testHtml (id unique, contentText)');
20. tx.executeSql('INSERT INTO testHtml (contentText) VALUES ("insert data test!")');
21. });
22.
23. db.transaction(function(tx){
24. tx.executeSql('SELECT * FROM testHtml',[],function(tx,result){
25. len=result.rows.length;
26. msg = "<p>Found rows: " + len + "</p>";
27. $("#testinfo").append(msg);
28. },null);
29. });
30.
31.
32. }
33.
34. </script>
35.
36.
37. </head>
38. <body>
39. <div>here is test info:</div>
40. <dividdivid="testinfo"></div>
41. </body>
| |
其他设置还有：
settings.setCacheMode(WebSettings.LOAD_DEFAULT); // 默认使用缓存
settings.setAppCacheMaxSize(8*1024*1024); //缓存最多可以有8M
settings.setAllowFileAccess(true); // 可以读取文件缓存(manifest生效)
in WebChromeClient :
[java] view plain copy print ?
1. myWebView.setWebChromeClient(newWebChromeClient()
2. {
3. @Override
4. publicvoidonExceededDatabaseQuota(String url, String databaseIdentifier,
5. longcurrentQuota,longestimatedSize,longtotalUsedQuota,
6. WebStorage.QuotaUpdater quotaUpdater)
7. {
8. 2);
9. }
10. }
or:
[java] view plain copy print ?
1. myWebView.setWebChromeClient(newWebChromeClient()
2. {
3. // 扩充缓存的容量
4. @Override
5. publicvoidonReachedMaxAppCacheSize(longspaceNeeded,longtotalUsedQuota,
6. WebStorage.QuotaUpdater quotaUpdater)
7. {
8. 2);
9. }
10. }
按照范例，我成功的解决了我的问题，而且之前弹出框所出现的找不到数据（提示：underfine）也解决了，这个应该是当初数据库没设所引起的。
WebView中存在着两种缓存：网页数据缓存（存储打开过的页面及资源）、H5缓存（即appcache）。
一、网页缓存
1、缓存构成
/data/data/package_name/cache/
/data/data/package_name/database/webview.db
/data/data/package_name/database/webviewCache.db
2、缓存模式
较难理解的是以下两个模式：
LOAD_DEFAULT，根据cache-control决定是否从网络上取数据。
LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
如：m.taobao.com的cache-control为no-cache，在模式LOAD_DEFAULT下，无论如何都会从网络上取数据，如果没有网络，就会出现错误页面；在LOAD_CACHE_ELSE_NETWORK模式下，无论是否有网络，只要本地有缓存，都使用缓存。本地没有缓存时才从网络上获取。
m.sina.com.cn的cache-control为max-age=60，在两种模式下都使用本地缓存数据。
总结：根据以上两种模式，建议缓存策略为，判断是否有网络，有的话，使用LOAD_DEFAULT，无网络时，使用LOAD_CACHE_ELSE_NETWORK。
3、清除缓存
clearCache(boolean)。
CacheManager.clear。高版本中需要调用隐藏API。
4、控制大小
无系统API支持。
可选方式：定时统计缓存大小、按时间顺序删除缓存。
二、H5缓存
1、缓存构成
根据setAppCachePath(String appCachePath)提供的路径，在H5使用缓存过程中生成的缓存文件。
2、缓存模式
无模式选择，通过setAppCacheEnabled(boolean flag)设置是否打开。默认关闭，即，H5的缓存无法使用。
3、清除缓存
找到调用setAppCachePath(String appCachePath)设置缓存的路径，把它下面的文件全部删除就OK了。
4、控制大小
通过setAppCacheMaxSize(long appCacheMaxSize)设置缓存最大容量，默认为Max Integer。
同时，可能通过覆盖WebChromeClient.onReachedMaxAppCacheSize(long requiredStorage, long quota, WebStorage.QuotaUpdater quotaUpdater)来设置缓存超过先前设置的最大容量时的策略。
三、参考网址
以下地址有关于H5缓存的一些内幕，如每个Application只调用一次WebSettings.setAppCachePath()，WebSettings.setAppCacheMaxSize()被忽略等一系列问题，需要仔细阅读和实验。
http://code.google.com/p/android/issues/detail?id=24180
WebView中存在着两种缓存：网页数据缓存（存储打开过的页面及资源）、H5缓存（即appcache）。
一、网页缓存
1、缓存构成
/data/data/package_name/cache/
/data/data/package_name/database/webview.db
/data/data/package_name/database/webviewCache.db
2、缓存模式
较难理解的是以下两个模式：
LOAD_DEFAULT，根据cache-control决定是否从网络上取数据。
LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
如：m.taobao.com的cache-control为no-cache，在模式LOAD_DEFAULT下，无论如何都会从网络上取数据，如果没有网络，就会出现错误页面；在LOAD_CACHE_ELSE_NETWORK模式下，无论是否有网络，只要本地有缓存，都使用缓存。本地没有缓存时才从网络上获取。
m.sina.com.cn的cache-control为max-age=60，在两种模式下都使用本地缓存数据。
总结：根据以上两种模式，建议缓存策略为，判断是否有网络，有的话，使用LOAD_DEFAULT，无网络时，使用LOAD_CACHE_ELSE_NETWORK。
3、清除缓存
clearCache(boolean)。
CacheManager.clear。高版本中需要调用隐藏API。
4、控制大小
无系统API支持。
可选方式：定时统计缓存大小、按时间顺序删除缓存。
二、H5缓存
1、缓存构成
根据setAppCachePath(String appCachePath)提供的路径，在H5使用缓存过程中生成的缓存文件。
2、缓存模式
无模式选择，通过setAppCacheEnabled(boolean flag)设置是否打开。默认关闭，即，H5的缓存无法使用。
3、清除缓存
找到调用setAppCachePath(String appCachePath)设置缓存的路径，把它下面的文件全部删除就OK了。
4、控制大小
通过setAppCacheMaxSize(long appCacheMaxSize)设置缓存最大容量，默认为Max Integer。
同时，可能通过覆盖WebChromeClient.onReachedMaxAppCacheSize(long requiredStorage, long quota, WebStorage.QuotaUpdater quotaUpdater)来设置缓存超过先前设置的最大容量时的策略。
三、参考网址
以下地址有关于H5缓存的一些内幕，如每个Application只调用一次WebSettings.setAppCachePath()，WebSettings.setAppCacheMaxSize()被忽略等一系列问题，需要仔细阅读和实验。
