HTML 5 Web 存储 与 应用缓存

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bamboolsu/article/details/49885955


缓存:

------页面缓存: 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:

实例

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

亲自试一试

下面的例子对用户访问页面的次数进行计数:

实例

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

亲自试一试

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

如何创建并访问一个 sessionStorage:

实例

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

亲自试一试

下面的例子对用户在当前 session 中访问页面的次数进行计数:

实例

<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

亲自试一试






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 文档(供离线浏览):

实例

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

亲自试一试

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)


          如果需要存储一些简单的用key/value对即可解决的数据,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,然后增加以下代码:

  1. WebSettings webseting = m_webview.getSettings();  
  2.     webseting.setDomStorageEnabled(true);             
  3.         webseting.setAppCacheMaxSize(1024*1024*8);//设置缓冲大小,我设的是8M  
  4.     String 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函数对扩充缓冲做出响应。代码如下:
  1. m_webview.setWebChromeClient(m_chromeClient);  
  2.     private WebChromeClient m_chromeClient = new WebChromeClient(){  
  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:

  1. public class efan_NewsReader extendsActivity {  
  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.                settings.setJavaScriptEnabled(true);    
  13.                // 设置可以使用localStorage  
  14.                settings.setDomStorageEnabled(true);  
  15.                // 应用可以有数据库  
  16.                settings.setDatabaseEnabled(true);     
  17.                String dbPath =this.getApplicationContest().getDir("database", Context.MODE_PRIVATE).getPath();  
  18.                settings.setDatabasePath(dbPath);  
  19.                // 应用可以有缓存  
  20.                settings.setAppCacheEnabled(true);              
  21.                String appCaceDir =this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();  
  22.                settings.setAppCachePath(appCaceDir);  
  23.                   
  24.                myWebView.loadUrl("http://10.10.35.47:8080/html5test/test.htm");  
  25.         }  
  26. }  



   

HTML5 page source code:
  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.      var 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.             var len=result.rows.length;  
  26.             var 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 :
  1. myWebView.setWebChromeClient(newWebChromeClient()  
  2. {     
  3.         @Override     
  4.         publicvoidonExceededDatabaseQuota(String url, String databaseIdentifier,  
  5.                        longcurrentQuota,longestimatedSize,longtotalUsedQuota,  
  6.                        WebStorage.QuotaUpdater quotaUpdater)     
  7.         {          
  8.                 quotaUpdater.updateQuota(estimatedSize * 2);     
  9.         }  
  10. }  

   


or:
  1. myWebView.setWebChromeClient(newWebChromeClient()  
  2. {  
  3.     // 扩充缓存的容量     
  4.         @Override     
  5.         publicvoidonReachedMaxAppCacheSize(longspaceNeeded,longtotalUsedQuota,  
  6.                        WebStorage.QuotaUpdater quotaUpdater)     
  7.         {          
  8.                 quotaUpdater.updateQuota(spaceNeeded * 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











展开阅读全文

没有更多推荐了,返回首页