使用 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[n] 的值。

在创建并将键/值对添加到此 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 存储。始终都要有一个备案，以便支持那些不想使用此新功能的用户。