Dive Into HTML5:检测 HTML5 特性(续二)

本地存储

HTML5 存储为 web 站点提供了一种将信息存储到电脑上,并且能够在以后将数据取出的能力。这个概念非常类似于 Cookie,但是它可以存储很大量的信息。Cookie 有大小限制。浏览器每次请求新的页面的时候都要讲 cookie 内容发送回服务器(这意味着会占用一定的时间和带宽)。HTML5 存储在你的计算机上,web 站点在页面加载完成之后使用 JavaScript 进行访问。

FAQ

Q: 本地存储真的是 HTML5 的一部分吗?为什么它是一个独立的标准?

A: 简单的答案是:是的,本地存储是 HTML5 的一部分。更完整的答案是,本地存储曾经是 HTML5 主标准的一部分,但后来被分离出来,因为 HTML5 Working Group 中有些人抱怨说 HTML5 太大了。这听起来像是将一个大饼分成几个小块可以减少类别数……好吧,他们就是这么想的——欢迎来到奇怪的标准世界!

我们使用第一种技术来检测浏览器是否支持 HTML5 本地存储。如果浏览器支持 HTML5 存储,那么全局的window对象将会有一个localStorage属性;否则该属性将会是undefined的。不过,对于老版本的 Firefox,这种检测方法有一个 bug:如果 cookie 被禁用,这个测试将引发一个异常。为了解决这个问题,我们需要使用 try…catch 块。

function supports_local_storage() {
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch(e){
        return false;
    }
}

如果你不愿意自己编写代码,当然也可以使用 Modernizr(1.1 或更新版本):

if (Modernizr.localstorage) {
    // window.localStorage is available!
} else {
    // no native support for local storage :(
    // maybe try Gears or another third-party solution
}

注意,JavaScript 是大小写敏感的。Modernizr 的属性叫做localstorage(全部是小写字母),而 DOM 的属性则是window.localStorage

FAQ

Q: HTML5 存储数据库的安全性怎么样?是不是每个人都能读取?

A: 只要能物理访问你的计算机的人都可以查看(甚至是修改)HTML5 存储数据库。但是通过浏览器,任何站点只能读取、修改自己的值,不能访问别的站点存储的内容。这被称作“同源限制”。

Web Workers

Web Workers 允许浏览器在后台运行 JavaScript 代码。使用 web workers,你可以创建可以在同一时刻运行的多个“线程”(类似你的计算机可以在同一时刻运行多个应用程序)。这些“背景线程” 可以用于执行复杂的数学计算、网络请求或者在主页面响应用户的滚动、点击或者输入时访问本地数据等。

我们可以使用第一种技术检测 web workers。如果浏览器支持 Web Worker API,则全局的window对象会有一个Worker属性;否则该属性将会是undefined的。

function supports_web_workers() {
    return !!window.Worker;
}

如果你不愿自己编写代码,可以使用 Modernizr(1.1 或更高版本) 做相关检测:

if (Modernizr.webworkers) {
    // window.Worker is available!
} else {
    // no native support for web workers :(
    // maybe try Gears or another third-party solution
}

注意 JavaScript 是大小写敏感的。Modernizr 的属性是webworkers(全部是小写字母),而 DOM 则是window.Worker

离线 Web 应用程序

离线浏览静态页面是很简单的:只需要连接 Internet,加载 web 页面,然后断开连接,根据你的计划阅读页面就可以了。但是如何离线使用 web 应用程序,比如 Gmail 或者 Google Docs?HTML5 就允许任何人(不仅仅是 Google)创建一个能够离线工作的 web 应用程序。

离线 web 应用程序和在线 web 应用程序一样的启动。第一次访问一个允许离线使用的 web 站点的时候,服务器会告诉浏览器那些文件是要在离线工作时使用到的。这些文件可以是任何文件——HTML、JavaScript、图像,甚至视频。一旦浏览器下载下来所有必须的文件,你就可以在不连接 Internet 的时候重新访问这个 web 站点。浏览器会注意到你在离线,就会自动使用已经下载下来的文件。当你恢复在线时,你所做的任何修改都将上传到远程 web 服务器。

我们使用第一种技术检测离线支持。如果浏览器支持离线 web 应用程序,那么全局的window对象即有一个applicationCache属性;否则的话这个属性值将是undefined。所以我们有下面的检测方式:

function supports_offline() {
    return !!window.applicationCache;
}

我们也可以使用 Modernizr (1.1 或更新版本) 检测是否支持离线 web 应用程序:

if (Modernizr.applicationcache) {
    // window.applicationCache is available!
} else {
    // no native support for offline :(
    // maybe try Gears or another third-party solution
}

同样注意,Modernizr 的属性是applicationcache(全部小写字母),而 DOM 对象则是window.applicationCache

Leave a Reply