HTML5离线应用与客户端存储

2023-08-02 09:44:46

序言

本篇文章会详细介绍使用HTML5开发离线应用的步骤，以及本地存储与cookie的一些异同，最后利用上面所学例子来实现一个购物车场景。

使用HTML5离线存储的基本过程如下：

离线检测：首先要对设备进行离线状态检测，根据设备在线或者离线判断接下来的操作；
离线缓存：将需要被缓存的资源写在一个描述文件（cache manifest）里，当设备在线时进行缓存，以便用户在离线时可以正常使用；
本地存储：离线时，把必要的数据存储到本地，当设备上线时将数据存储到服务器上。

下面就从这三个方面展开进行介绍。

离线检测

开发离线应用首先要检测设备的状态，根据设备在线或者离线进行接下来的操作。HTML5为我们提供了两种判断设备在线状态的方式：属性navigator.onLine和事件online/offline。

为了检测应用是否离线，我们可以通过navigator.onLine判断设备的初始状态，同时通过online/offline事件来确定网络的连接状态是否变化。online/offline事件首先在body上触发，随后会沿着document.body, document, window的顺序冒泡，所以我们可以对它们进行监听获得设备的状态变化。

if(navigator.onLine){

  //正常工作

}

else{

  //执行离线事件处理程序

}

window.addEventListener('online', function(){

  //进行离线缓存

});

window.addEventListener('offline', function(){

  //使用离线缓存

})

离线缓存

描述清单

通过离线检测，我们需要在设备在线时对需要的文件进行缓存。HTML5 的应用缓存（application cache），或者简称为appcache，是专门为开发离线Web应用而设计的。Appcache 就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。下面是一个简单的描述文件示例。

CACHE MANIFEST

#上面的声明必不可少

index.html

common.css

NETWORK:

*.html

CACHE:

login.html

FALLBACK:

*.html offline.html
/project /offline/project

描述文件的基本格式如下：

CACHE MANIFEST书写在第一行，而且必不可少；
#开头代表注释；
CACHE标识符：这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在CACHE MANIFEST 后的文件）后显式缓存这些文件；
NETWORK标识符：代表“白名单”，它表示的是无论在线离线都需要联网访问的文件；
FALLBACK标识符：此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。

在声明好描述文件的后，需要将描述文件与页面关联起来。在文档的 html 标记中添加 manifest 属性：

<html manifest='/offline.manifest'>

注1：描述文件扩展名以前推荐使用manifest，但现在推荐的是appcache。
注2：网站的应用缓存数据量不得超过5MB。
注3:系统会自动缓存引入描述清单的HTML文件，不过还是建议将其写入到描述清单中。

更新缓存

浏览器除了在第一次访问 Web 应用时缓存资源外，只有在以下三种情况才会对缓存进行更新：

浏览器缓存被删除
manifest描述文件本身发生变化
应用缓存通过编程方式进行更新

而cache manifest中的资源文件发生变化并不会触发更新，所以在对资源进行更改后，需要向描述文件中加入时间戳或版本号。

要以编程方式对缓存进行更新，需要用到缓存对象window.applicationCache。可以使用它的属性window.applicationCache来判断缓存状态，全部状态如下：

0：UNCACHED-没有与页面相关的应用缓存
1：IDLE-应用缓存未更新
2：CHECKING-正在检查描述文件是否更新
3：DOWNLOADING-下载中
4：UPDATEREADY-更新完成
5：OBSOLETE-描述文件不存在了，不能获取应用缓存

比较常用的缓存状态UPDATEREADY，当判断缓存更新完成，就可以对浏览器应用缓存，并进行刷新。与之相同的还有缓存事件：

checking：浏览器在为应用缓存查找更新时触发
error：查找错误时触发
noupdate：检查后发现描述文件无变化时触发
downloading：开始下载应用缓存资源时触发
progress：在下载应用缓存资源时不断的触发
updateready：应用缓存已经更新完毕，此时可以手动触发swapCache()应用更新的缓存
cached：在应用缓存完整可用时触发

一般来讲，这些事件会随着页面加载按上述顺序依次触发。不过，通过调用 update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件。在调用update()后，我们通常使用updateready()和swapCache()，实现对浏览器缓存的更新，具体步骤如下：

window.applicationCache.update();        //手动检测更新

window.applicationCache.addEventListener('updateready', function(){

  if(window.applicationCache.status == window.applicationCache.UPDATEREADY){

    window.applicationCache.swapCache();        //应用更新

    if(confirm('是否应用新的缓存？')){

      window.location.reload();                 //刷新页面

    }

  }

  else{

    //没有缓存更新

  }

})

注：You can programmatically test to see if an application has an updated cache manifest file, using JavaScript. Since a cache manifest file may have been updated before a script attaches event listeners to test for updates, scripts should always test window.applicationCache.status.

本地存储

Cookie

Cookie是最基础的存储方式，主要用于服务器对用户登陆的判断。服务器会对每一个HTTP请求发送Set-Cookie作为HTTP头的一部分，浏览器会保存该部分内容，并在之后的每个请求头中加入该Cookie，以便服务器识别请求的来源。

Cookie由名字，值，域，路径，失效时间和安全标志组成。其中域和路径发送该Cookie的地址；失效时间是表示该Cookie何时被删除的时间戳（默认情况下，浏览器会在回话关闭时删除所有Cookie，不过我们也可以自己设置删除时间）；而指定安全标志后，Cookie只有通过SSL连接才能传输。大体结构如下：

HTTP/1.1200 OK

Content-type: text/html

Set-Cookie: name=value; expires=Mon,22-Jan-0707:10:24 GMT; domain=.wrox.com; path=/; secure

Other-header: other-header-value

我们可以使用BOM提供的接口document.cookie来设置Cookie，上述参数中只有name/value是必选项，只要name没有重复，为cookie赋值是不会覆盖已有信息的。不过这样做有点蹩脚，就像下面的代码一样：

document.cookie = encodeURIComponent('name') + '=' + encodeURIComponent('pansy');

所以我们通常为Cookie封装新的函数来进行操作，下面封装实现了对Cookie值的增删和查询，可以把这种常用操作加入到自己的库里：

var CookieUtil = {

    set: function(name, value, domain, path, expires, secure){  //前两个是必填的

        var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);

        if(domain){

            cookieText += '; domain=' + encodeURIComponent(domain);

        }

        if(path){

            cookieText += '; path=' + encodeURIComponent(path);

        }

        if(expires instanceof Date){

            cookieText += '; expires=' + expire.toGMTString;

        }

        if(secure){

            cookieText += '; secure';

        }

        document.cookie = cookieText;

    },

    get: function(name){

        cookieName = encodeURIComponent(name);     //一定不要忘记进行URL编码

        cookieStart = document.cookie.indexOf(name);

        cookieValue = null;

        if(cookieStart != -1){

            cookieEnd = document.cookie.indexOf(';', cookieStart);

            if(cookieEnd == -1){

                cookieEnd = document.cookie.length;

            }

            cookieValue = document.cookie.slice(cookieStart, cookieEnd);   //或者使用string.prototype.substring

        }

        return cookieValue;

    },

    del: function(name){

        this.set(name,"",new Date(0))

    }

}

由于所有的 cookie 都会由浏览器作为请求头发送，所以在 cookie 中存储大量信息会影响到特定域的请求性能。 cookie 信息越大，完成对服务器请求的时间也就越长。尽管浏览器对 cookie 进行了大小限制，不过最好还是尽可能在 cookie 中少存储信息，以避免影响性能。
cookie 的性质和它的局限使得其并不能作为存储大量信息的理想手段，所以又出现了其他方法。

Storage

cookie提供的本地存储空间十分有限（要不然怎么叫小饼干呢~），通常只有几K，所以HTML5引用了Storage来进行本地存储，Storage 类型提供最大的存储空间来存储名值对儿（key/value）。DOM Storage 分为两类：sessionStorage 和 localStorage。除了以下区别外，这两类存储对象的功能是完全一致的（因为它们同属一种Storage类型）。

sessionStorage 用于存储与当前浏览器窗口关联的数据。窗口关闭后，sessionStorage 中存储的数据将无法使用。
localStorage 用于长期存储数据。窗口关闭后，localStorage 中的数据仍然可以被访问。所有浏览器窗口可以共享 localStorage 的数据。

对Storage的操作可以通过方法或者属性来实现，下面以localStorage为例，sessionStorage与之相同：

//设置、读取、删除变量

//使用方法

localStorage.setItem("name", "Pansy");

var name = localStorage.getItem("name")

localStorage.removeItem("name");

//使用属性

localStorage.book ="Professional Javascript";

var book = localStorage.book;

remove localStorage.book;

备忘录实例

使用HTML5本地存储做了一个备忘录的实例，如下图所示，进一步的代码可以在GitHub上获取：

本地存储demo -- webpansy

参考文章：
HTML5 localStorage本地存储实际应用举例 « 张鑫旭

码农公寓

序言