使用 HTML5 Web 存储实现离线工作:

使用 Web 存储添加离线功能

HTML5 是一个新的 HTML 标准，它拥有大量新的功能和布局技术。它完全支持多媒体、CSS3 以及使用画布和可缩放矢量图形 (Scalable Vector Graphics, SVG) 的绘图功能。HTML5 提供了新的语义元素，还提供了恰当的使用应用程序缓存器、JavaScript worker、新版本的

XMLHttpRequest

和一种名为 Web 存储的工具创建 HTML Web 应用程序的方式。本文将探讨 Web 存储的强大功能，以及它成为一种优于 cookies 的存储方法的原因。通过本文您将了解基本概念、浏览器支持和 HTML5 Web 存储对象。

概述

Cookies 从 JavaScript 出现之初就一直存在，所以在 Web 上存储数据并不是个新概念。不过Web 存储是数据存储的一种更为强大的版本，可提供更多的安全性、速度和易用性。在 Web 存储中还可以存储数量巨大的数据。具体的数量则取决于 Web 浏览器，但通常都在 5MB 到10MB 之间，这对于一个 HTML 应用程序而言已经足够大。另一个好处是此数据并不会在每次出现服务器请求时都被加载。惟一的限制是不能在浏览器之间分享 Web 存储, 如果您在 Safari 中存储了数据，那么该数据在 Mozilla Firefox 中是无法访问的。

内置到 HTML5 中的 Web 存储对象有两种类型：

sessionStorage

对象负责存储一个会话的数据。如果用户关闭了页面或浏览器，则会销毁数据。

The

localStorage

对象负责存储没有到期的数据。当 Web 页面或浏览器关闭时，仍会保持数据的存储，当然这还取决于为此用户的浏览器设置的存储量。

常用的缩写语

API：应用程序编程接口 (Application Programming Interface)

CSS：级联样式表 (Cascading Style Sheet)

HTML：超文本标记语言 (HyperText Markup Language)

JSON：JavaScript Serialized Object Notation

这两种存储对象具有相同的方法和属性。为了获得一致性，本文在所有的示例中使用的都是

localStorage

对象。

在本文中，我们将了解 Web 存储的强大功能，以及它成为优于 cookies 的一种存储方式的原因。本文还将探索基本的 Web 存储概念、HTML5 Web 存储方法和浏览器支持。

浏览器支持

所 有最新的浏览器版本均支持 Web 存储特性，这些浏览器包括 Firefox、Google Chrome、Safari、Opera 和 Microsoft® Windows® Internet Explorer® 8+。不幸地是，Internet Explorer 7 和更早版本不支持 Web 存储。表 1 显示了支持 HTML5 Web 存储的每个桌面浏览器版本。

表 1. HTML5 Web 存储的桌面浏览器支持

Chrome	Firefox	Safari	Opera	Internet Explorer
4+	4+	4+	11+	8+

除了 Opera Mini 之外，其他移动浏览器也提供了对 HTML5 Web 存储的支持。表 2 显示了支持 HTML5 Web 存储的每个移动浏览器版本。

表 2. HTML5 Web 存储的移动浏览器支持

iOS	Android	Opera Mini	Opera Mobile
5+	3+	NA	11+

HTML5 Web 存储的浏览器支持十分令人瞩目。但是，较老的浏览器要求在使用之前检查 Web 存储支持的浏览器。为了了解 Web 存储支持而对浏览器进行检查非常简单。可以使用一个简单的条件语句来查看 HTML5 存储对象是否已经定义。如果已经定义，就可以放心进行 Web 存储脚本编写。如果未定义，而数据存储又是必需的，则需要采用一种备选方法，比如 JavaScript cookie。清单 1 的例子显示了一种简单的为

Storage

对象进行浏览器检查的方式。

清单 1. Web 存储支持的浏览器检查

if(typeof(Storage)!== "undefined") {
// Web storage is supported
}
else {
// Web storage is NOT supported
}

如果浏览器不支持 Web 存储，那么您可以使用 JavaScript cookie 或一个现有的库（比如 AmplifyJS）来创建一个定制的 Web 存储对象。AmplifyJS 是一组组件，旨在通过一个简单的 API 解决常见 Web 应用程序问题，包括某些浏览器中的 Web 存储支持。AmplifyJS 用

amplify.store

包装程序来处理持久的客户端存储，它支持 Internet Explorer 5+、Firefox 2+、Safari 4+、Chrome、Opera 10.5+、iOS 2+ 和 Android 2+。这个库还支持一个持久的 API 来处理跨浏览器存储；您无需基于具体的浏览器编写不同的代码。如果浏览器支持 HTML5 Web 存储，那么 AmplifyJS 就会使用最新的存储技术。如果浏览器不支持 HTML5 Web 存储，那么 AmplifyJS 就会降级，以支持没有该功能的存储。更多地了解 AmplifyJS 以及用于其存储包装程序的 API。

入门

有几种简单易用的方法可提供 HTML5 Web 存储功能。这些方法支持设置一个键/值对，提供了两个基于键来检索某个值的选项，同时清除所有的键/值对，并删除了某个特定的键/值对。表 3 显示了可用的 HTML5 Web 存储方法。

表 3. HTML5 Web 存储方法

方法	描述
setItem(key, value)	为 Web 存储对象添加一个键/值对，供以后使用。该值可以是任何的数据类型：字符串、数值、数组等。
getItem(key)	基于起初用来存储它的这个键检索值。
clear()	从此 Web 存储对象清除所有的键/值对。
removeItem(key)	基于某个键从此 Web 存储对象清除特定的键/值对。
key(n)	检索 key 的值。

在创建并将键/值对添加到此 Web 存储对象时，可以使用任何类型作为键/值对中的值（字符串、数值、数组、对象等）。要存储一个数组或对象，则必须使用 JSON 对象通过

JSON.stringify

方法将数据转换为一个字符串。在检索此数据时，可以使用

JSON.parse

进行检索，它会返回原始状态的对象或数据。还有两种向 Web 存储对象添加键/值对的不同方式。第一种方式是使用

setItem

方法，如清单 2 所示。

清单 2. 使用

setItem

方法向 Web 存储对象添加键/值对

localStorage.setItem('myKey', 'myValue');

向 Web 存储对象添加键/值对的第二种方法是使用带 dot 参数的 Web 存储对象来直接设置此键的值，如清单 3 所示。

清单 3. 直接向 Web 存储对象添加键/值对

localStorage.myKey = 'myValue';

检索所存储的值同样十分简单，也有两种方式。第一种方式是使用

getItem

方法，它接受键作为参数并返回相应的值（如果存在）。清单 4 显示了一个示例。

清单 4. 使用

getItem

从 Web 存储对象中检索键/值对

localStorage.getItem('myKey');

从 Web 存储对象中检索键/值对的第二个方法是使用 dot 参数直接访问它，如清单 5 所示。该示例返回了在之前的例子中设置的

'myValue'

字符串值。

清单 5. 直接从 Web 存储对象中检索键/值对

localStorage.myKey;

有两种方法可以删除所存储的数据。可以同时删除所有项，也可以一次删除个别项。要同时从 Web 存储对象中删除所有项，可以使用

clear

方法，如清单 6 所示。

清单 6. 从 Web 存储对象中删除所有键/值对

localStorage.clear();

要从 Web 存储对象中删除单个键/值对，需要使用

removeItem

方法。清单 7 显示了

removeItem

方法的一个示例，它接受一个键作为参数，并确定哪个键/值对要从此存储对象删除。

清单 7. 从 Web 存储对象中删除单个键/值对

localStorage.removeItem('myKey');

清单 8 显示了一个如何使用 JSON 对象通过

JSON.stringify

方法将一个数组存储为字符串的示例。可以采用相同的方法处理对象。

清单 8. 在 HTML5 Web 存储中将一个数组存储为字符串

var myArray = new Array('First Name', 'Last Name', 'Email Address');
localStorage.formData = JSON.stringify(myArray);

要从 Web 存储检索数组的字符串版本，并将它转换回一个可用的 JavaScript 数组，只需使用

JSON.parse

方法，如清单 9 所示。

清单 9. 从 HTML5 Web 存储中检索数组的字符串版本并将它转换成一个可用的 JavaScript 数组

var myArray = JSON.parse(localStorage.formData);

Internet Explorer 8+、Opera 10.5+、Firefox 3.5+、Safari 4+ 和 Chrome 均包括了一个本地的 JSON 对象，可以使用该对象来支持之前例子中的那些代码。如果您使用的是版本较早的浏览器，那么可以下载 json2.js 文件

到目前为止，Web 存储看起来很容易使用。但是，在开始使用之前，您应该意识到在共享的机器上会存在安全性问题。Web 存储并不比 cookies 安全。所以不要在客户端存储敏感信息，比如密码或信用卡信息。

工作中的 Web 存储

介绍完基础知识后，现在是时候将 HTML5 Web 存储付诸于使用了。假设在您的网站上，您想要为一个 Web 表单提供离线支持。如果用户提交了表单，并且在网站恢复在线时让此表单与服务器同步，那岂不是很不错。HTML5 可以实现此目标。

创建一个简单的 Web 表单，其中包含姓名、电子邮件地址和提交按钮，如清单 10 所示。

清单 10. 使用 HTML5 Web 存储来存储数据的一个简单 Web 表单

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Web Storage</title>
<style type="text/css">
label,
input {
display: block;
}
input {
margin-bottom: 10px;
}
</style>
</head>

<body>

<form action="post.php" method="post" id="web-storage-form">
<label for="first-name">First name:</label>
<input type="text" name="first-name" id="first-name">

<label for="last-name">Last name:</label>
<input type="text" name="last-name" id="last-name">

<label for="email-address">Email Address:</label>
<input type="text" name="email-address" id="email-address">

<input type="submit" value="Submit">
</form>

</body>
</html>

此表单包含了一个 ID，可使用 JavaScript 检索表单 post 和值。此外，它还提供了 CSS，以创建具有表单元素的基本布局。标签和输入上的

display:block

将每个元素置于一个新行。

margin-bottom

属性在条目之间创建空间，让页面看起来不会太乱。

当用户提交表单时，代码首先会检索

web-storage-form

ID 并使用 jQuery 捕获默认张贴，以阻止此张贴操作的发生。当张贴表单时，就可以收集表单值以及此表单动作的 URL，以便将它们存储在变量中。在作为 Asynchronous JavaScript + XML (Ajax) post 发送表单值，或将它们存储于 Web 存储中时，您还需要序列化这些 Web 表单值。在提交表单之前，应该使用

navigator.onLine

属性查看用户当前是否在线。

如果用户在线，则使用

jQuery.post

函数，这是一个简略的 Ajax 函数，用于发送数据并从服务器接收数据。这个函数接受四个参数：数据被发送到的

url

、正在发送的

data

（序列化后的表单值）、请求成功便会触发的

callback

函数以及

dataType

。在本例中，并未包括

dataType

，所以会使用默认参数。

如果用户不在线，那么就可以让 Web 存储一展身手了。首先也是很重要的一点是，使用 清单 1 中创建的条件语句来查看浏览器是否支持 Web 存储。如果浏览器不支持 Web 存储，则使用一个定制键将表单值直接存储到

localStorage

对象中。本例使用了

formValues

定制键。

localStorage

值的已经保存，现在可以检查当用户恢复在线时这些值是否存在，做法是通过添加一个

if

语句来检查

localStorage.formValues

是否有一个值。如果有一个值，则表明这个表单之前已经提交到

localStorage

，并可以使用先前设置好的

jQuery.post

方法安全地向服务器发送数据。在提交值之后，应该从 Web 存储中将它们删除，以防止意外地重复提交它们。清单 11 显示了从使用 Ajax 的表单张贴到

localStorage

期间所需代码。

清单 11. 离线时将表单数据存储于

localStorage

，在线时将其提交到服务器

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
// Check for web storage values from a previous offline session
if(localStorage.formValues) {
console.log("localStorage.formValues: "+ localStorage.formValues);
postForm($("#web-storage-form").attr('action'), localStorage.formValues);
localStorage.removeItem("formValues");
}

$("#web-storage-form").submit(function(event) {
// Prevent the form from posting
event.preventDefault();

// Gather values
var formValues = $(this).serialize();
var url = $(this).attr('action');
postForm(url, formValues);
});
});

function postForm(url, formValues) {
// Post to server or post to web storage
if(navigator.onLine) {
console.log("Online");
$.post(url, formValues, function(data) {
console.log("Success: "+ data);
});
}
else {
console.log("Offline");
if(typeof(Storage) !== "undefined") {
console.log("Storage supported");
localStorage.formValues = formValues;
}
}
}
</script>

为了创建一个完整的例子，使用 post.php 文件充当表单张贴的结尾，用以接收和响应表单请求。这个文件只简单接收表单张贴并通过打印键/值对进行响应，如清单 12 所示。当

jQuery.post

收到响应后，就可以将来自响应的数据写入控制台了。

清单 12. 可响应表单请求的 PHP 文件

<?php print_r($_POST); ?>

当然，您还可以让这个例子更为健壮。比如，您可以在服务器端上提供数据库存储，并使用一个间隔来检查

localStorage

，以便随时监视用户的计算机是否恢复在线，从而提交表单数据。

回页首

结束语

HTML5 提供了一组强大的新功能，并迅速获得了主要 Web 浏览器的最新版本的支持。Web 存储是 HTML5 众多引人注目的特性中的一个。但是，务必巧妙使用它。对于 cookie，用户可以关闭 Web 存储。始终都要有一个备案，以便支持那些不想使用此新功能的用户。