本地存储
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
。