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 页面或浏览器关闭时，仍会保持数据的存储，当然这还取决于为此用户的浏览器设置的存储量。
这两种存储对象具有相同的方法和属性。为了获得一致性，本文在所有的示例中使用的都是 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 就会降级，以支持没有该功能的存储。