码迷,mamicode.com
首页 > Web开发 > 详细

离线web存储

时间:2014-09-23 02:21:53      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:des   android   style   blog   http   io   os   使用   java   

本地缓存与浏览器网页的缓存

本地缓存与浏览器网页缓存的区别

离线缓存需要 本地缓存web应用程序的所有html css js 文件本地缓存服务于整个web应用

浏览器网页缓存只服务于单个网页,

任何网页都具有缓存,而本地缓存只缓存你指定缓存的网页。网页缓存不安全、不可靠,我们不知道网站中缓存了哪些网页,缓存了哪些网页上的资源。本地缓存是可靠,我们可以控制对那些没内容进行缓存,开发人员还可用编程的手段来控制缓存的更新,利用缓存对象的属性、状态事件开发更强大的离线web应用。

manifest文件

  web应用的本地缓存是通过每个页面的manifest文件进行管理的

CACHE MANIFEST   //必须的

 

#This is a comment

CACHE         //要缓存文件用于离线使用

index.html

style.css

NETWORK:   //  不进行本地缓存存储的文件

search.php

login.php

FALLBACK:   //两个文件分别为能够在线时访问使用的资源,不能在线访问时用的资源

/api offline.html

applicationCache对象:代表本地缓存,用它来通知本地缓存已被更新,也允许用户手动更新

当浏览器对本地缓存更新,装入新文件的时会触发applicationCatche对象的updateready事件 来通知本地缓存已被更新(可以用它来告诉用户,用户需要手工刷新来获取页面的最新版本)

applicationCatche.onUpdateReady = function(){}

swapCatch方法用于手工执行本地缓存的更新只能在applicationCatcheupdateready事件被触发时调用,updateReady事件只有在服务器上的manifest文件被修更新,且把manifest文件中所要求的资源下载到本地时出发

    setInterval(function() {

        // 手工检查是否有更新

        applicationCache.update();

    }, 5000);

    applicationCache.addEventListener("updateready", function() {

        if (confirm("本地缓存已被更新,需要刷新画面来获取应用程序最新版

本,是否刷新?")) {

        // (3) 手工更新本地缓存

            applicationCache.swapCache();

            // 重载画面

            location.reload();

        }

    }, true);

 

applicationCatche的其他事件

function init()

{

    var msg=document.getElementById("msg");

    applicationCache.addEventListener("checking", function() {

        msg.innerHTML+="checking<br/>";

    }, true);

    applicationCache.addEventListener("noupdate", function() {

        msg.innerHTML+="noupdate<br/>";

    }, true);

    applicationCache.addEventListener("downloading", function() {

        msg.innerHTML+="downloading<br/>";

    }, true);

    applicationCache.addEventListener("progress", function() {

        msg.innerHTML+="progress<br/>";

    }, true);

    applicationCache.addEventListener("updateready", function() {

        msg.innerHTML+="updateready<br/>"; 

    }, true);

    applicationCache.addEventListener("cached", function() {

        msg.innerHTML+="cached<br/>";         

    }, true);

    applicationCache.addEventListener("error", function() {

msg.innerHTML+="error<br/>";

    }, true);

}

 

 

       HTML5近十年来发展得如火如荼,在HTML5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。HTML功能越来越丰富,支持图片上传拖拽、支持localstorage、支持web sql database、支持文件存储api等等。它任重而道远,致力于将Web带入一个更为成熟的应用平台。在所有炫酷特性中,最让我喜欢的是它具有离线缓存Web应用的功能。

开发离线Web 应用程序:三大核心功能

在开发支持离线的 Web 应用程序时,开发者通常需要使用以下三个方面的功能:

1. 离线资源缓存:需要一种方式来指明应用程序离线工作时所需的资源文件。这样,浏览器才能在在线状态时,把这些文件缓存到本地。此后,当用户离线访问应用程序时,这些资源文件会自动加载,从而让用户正常使用。HTML5 中,通过 cache manifest 文件指明需要缓存的资源,并支持自动和手动两种缓存更新方式。

2. 在线状态检测:开发者需要知道浏览器是否在线,这样才能够针对在线或离线的状态,做出对应的处理。在 HTML5 中,提供了两种检测当前网络是否在线的方式。

3. 本地数据存储:离线时,需要能够把数据存储到本地,以便在线时同步到服务器上。为了满足不同的存储需求,HTML5 提供了 DOM Storage 和 Web SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式,而后者提供了基本的关系数据库存储功能。

 

离线存储HTML5 Web SQL Database

Web SQL Database 提供了基本的关系数据库功能,支持页面上的复杂的、交互式的数据存储。它既可以用来存储用户产生的数据,也可以作为从服务器获取数据的本地高速缓存。例如可以把电子邮件、日程等数据存储到数据库中。Web SQL Database 支持数据库事务的概念,从而保证了即使多个浏览器窗口操作同一数据,也不会产生冲突。

它还引入了一套使用 SQL 来操纵客户端数据库(client-side database)的 API,这些 API 是异步的(asynchronous)。所使用的 SQL 语言为 SQLite 3.6.19。其中 SQLite 是一款轻型的数据库,占用资源非常低,支持 Windows/Linux/Unix 等主流操作系统,同时能够跟很多程序语言相结合,如 C#,PHP,Java,JavaScript 等,比起 Mysql,PostgreSQL 这两款开源的数据库管理系统来说,它的处理速度更快。目前iOS和Android平台支持运行Web SQL Database。

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB

 

db.transaction(function(tx) {

 

tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);

 

});

 

Web Workers

 

main.js:

 

var worker = new Worker(‘task.js‘);

 

worker.onmessage = function(event) { alert(event.data); };

 

worker.postMessage(‘data‘);

 

task.js:

 

self.onmessage = function(event) {

 

// Do some work.

 

self.postMessage("recv‘d: " + event.data);

 

};

 

 

  HTML5 IndexedDB:轻量级NoSQL数据库

IndexedDB是HTML5-WebStorage的重要一环,是一种轻量级NoSQL数据库。

w3c为IndexedDB定义了很多接口,其中Database对象被定义为IDBDataBase。

浏览器对象中,实现了IDBFactory的只有indexedDB这个实例。

 

五步创建HTML5离线Web应用

在HTML5提供的所有炫酷功能里,创建离线缓存网页是我最喜欢的一个特性,以下是五步快速创建HTML5离线Web应用的步骤

 

1. 第一步:创建一个有效的HTML5文档,HTML5 doctype比xhtml更易于识记。

创建一个名为index.html的文件,这里学习如何使用CSS3来策划网站布局。

http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

2. 新增.htaccess支持

我们要创建的缓存页面称为manifest文件,假设你所使用的服务器是Apache,我们在创建文件之前,需要往.htaccess文件新增一个指令。

打开.htaccess文件,该文件部署在网站的根目录下,新增以下代码:

AddType text/cache-manifest .manifest

该指令可以确保每一个.manifest文件文本高速缓存。如果该文件不存在,整个缓存效果就无法实现,页面也不能实现离线缓存。

 

3. 创建.manifest文件

在我们创建好了.manifest文件后,事情就变得有趣多了。创建好新文件,命名为offline.manifest,嵌入以下代码。

CACHE MANIFEST

 

#This is a comment

 

CACHE

 

index.html

 

style.css

 

image.jpg

 

image-med.jpg

 

image-small.jpg

 

notre-dame.jpg

 

 

现在你拥有了一个完美的manifest列表。其实原理很简单,在声明CACHE后,你可以列出自己想要离线缓存的文件。这个对于缓存一个简单的网页,已经是绰绰有余了,而HTML5的缓存有其它一些有趣的功能。

CACHE MANIFEST   //必须的

 

#This is a comment

 

CACHE         //要缓存文件用于离线使用

 

index.html

 

style.css

 

NETWORK:   //  不进行本地缓存存储的文件

 

search.php

 

login.php

 

FALLBACK:   //两个文件分别为能够在线时访问使用的资源,不能在线访问时用的资源

 

/api offline.html

 

在这个示例中,manifest文件声明了CACHE,用于缓存index.html和style.css。同时,我们声明了NETWORK,用于指定不被缓存的文件,比如登录页面。

最后声明的是FALLBACK,这个声明允许将用户转入一个指定的页面,比如本例中如果不打算离线查看API资源的话,可以转向Off.html页面。

 

4. 将manifest 文件链接到HTML文档中。

在manifest文件和主要的html文档准备好了以后,你唯一还需要做的事情是将manifest文件链接到html文档中。

操作方法很简单,只需在html元算中添加manifest 属性,代码如下:

 

 

本地数据库

 1.创建访问数据库的对象                  //var db = openDatabase(‘mysql‘,‘1.0‘,‘Test DB‘,2*1024*1024) 当数据库不存在时会创建数据库

2.使用事务处理                                   //访问数据库调用transaction方法执行事务处理  参数为一个回调函数

Eg bd.transaction(function(tx){

         tx.executeSql(‘CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTEGER)‘,[]); 

        tx.executeSql(‘SELECT * FROM MsgData‘, [], function(tx, rs)

        { //removeAllData(); 

            for(var i = 0; i < rs.rows.length; i++)

            { 

                showData(rs.rows.item(i)); 

            } 

        });  });  });

Tx.executeSql(‘sql参数用?‘,[为?赋值]funsuccessfunerror)

 

本地缓存通过每个页面的mainfest文件来管理。 

浏览器和服务器的交互过程: 

  浏览器请求URL->服务器返回页面->浏览器解析页面->服务器返回所有资源->浏览器处理mainfest文件->服务器返回所有要求本地缓存的文件->浏览器对本地缓存进行更新 

  浏览器再次请求URL->浏览器发现缓存->浏览器解析缓存页面->浏览器请求mainfest->(无更新)服务器返回304(【如果已更新】->浏览器再次请求URL->浏览器发现缓存页面->浏览器解析缓存页面->浏览器请求mainfest文件->服务器返回更新过的mainfest->浏览器处理mainfest->浏览器返回本地缓存->浏览器对本地缓存进行更新) 

【缓存更新在本地缓存更新完还是不能用,只有重新打开这个页面的时候才能使用更新过的资源文件】 

      通过触发applicationCache对象的onUpdateReady事件,告诉用户本地缓存已经被更新,需手工刷新页面来得到最新版本的应用程序。 

    通过触发applicationCache对象的swapcache方法手工执行本地缓存更新操作,他只能在applicationCache对象的updataReady事件里被触发调用。 

离线web存储

标签:des   android   style   blog   http   io   os   使用   java   

原文地址:http://www.cnblogs.com/hansu/p/3987325.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!