译文：网络存储:更简便更强大的客服端数据存储

导言

随着Javascript的复杂应用和即将推出的的标准和技术，web应用程序变得越来越先进。我们不断依赖这些应用程序，它们中的大部分已成为我们日常生活中的一部分。在Web应用程序开发中，有一个领域一直很匮乏－－客服端存储数据的能力。直到现在还是这样。

网络存储是一个W3c规范，它提供了在客服端存储数据的能力，直到最后一个会话（会话存储）或局部存储。这远比传统的cookie强大，也更容易操作。在这篇文章中，我们将了解它并学会使用它。

当前的问题：cookie不堪其重

在继续深入之前，让我们对当前在客户端存储数据的方式cookie作一个简要的回顾，它存在以下问题：

• 低容量：通常情况下，cookie的最大容量大约为4kb，这对于存储任何类型的复杂数据是远远不够的；
• 在同一个站点，使用cookie很难跟踪两个或多个事务，这一般发生在两个或多个不同的标签打开时；
• 使用诸如跨站点脚本技术，cookie可以被探测，这会导致安全漏洞

其他与cookie相关的不常用的技术包括查询字符串、隐藏表单域、基于Flash的本地共享对象，每一个都涉及到安全、易用性、大小限制等一系列相关问题。所以直至现在，我们一直使用非常糟糕的方式在客户端存储数据。我们需要一个更好的方式来完成这一切，这就是网络存储的用武之地。

网络存储

W3C的网络存储规范设计了一种在客户端存储数据的更好的方法。它有两个不同的存储类型：会话存储和本地存储。

这两种存储方式在每个域中大约能存储5MB的数据，这明显多于Cookie。正如我们将要看到的那样，我们将更深入的了解它们，并明白是什么使得网络存储成为一个最好的存储机制。

会话存储

会话存储只有一个目的：在你的会话中记住所有数据，并在你关闭选项卡（或窗口）时尽快忘掉它。

设置和获取数据

要在会话存储中设置键值对，你只需要写一行这样的代码：

sessionStorage.setItem(yourkey, yourvalue);

在此获取数据，只需要这样做：

var item = sessionStorage.getItem(yourkey);

在会话存储中存储值“This is a sample sentence”，你可以这样写：

sessionStorage.setItem(1, 'This is a sample sentence');

注意，这里的key值为1，但并不意味着它是第一个值，它只是将数字“1”转换成字符“1”，并用它作为key值，但这并不意味着将键值对放在第一的位置。

用javascript的alert方法获取那句话，你可以写：

var item = sessionStorage.getItem(1);
alert(item);

另一个setItem()的例子：

sessionStorage.setItem('name', 'john');

你可以用它来获取：

var name = sessionStorage.getItem('name');

删除和清除数据

也有一些从网络存储中删除和清除数据的方法，removeItem()方法用于从列表中删除一个特定项。

var item = sessionStorage.removeItem(yourkey);

记住，你也可以只引用一个数据项的键值，然后从列表中删除它：

var items = sessionStorage.removeItem(1);

clear()方法用来清除列表中的所有项，你可以使用以下方式：

sessionStorage.clear();

您还可以使用length属性来找出存储中键/值对的数量，如：

var no_of_items = sessionStorage.length;

本地存储

如果你想存储的数据为多个会话服务，就使用本地存储。一个简单的例子就是计算用户访问页面的次数。当一个页面使用本地存储时，页面（或窗口）可以关闭并重新打开，但保存的数据仍能显示－－它提供了永久的存储。

在本地存储中存储和获取数据与会话存储相似：它们使用相同的函数名setItem()和getItem()。要在本地存储中存储一个句子，你可以像这样来写：

localStorage.setItem(1, 'This is a sample sentence');

获取它：

var data = localStorage.getItem(1);

就像会话存储一样，本地存储支持length属性， removeItem()和clear()方法。

在会话存储和本地存储中，clear()函数具有相同的目的－－清除列表中所有的值。这意味着如果你调用，假定是localStorage.clear()，然后它会从根本上删除所有本地存储。所以说，所有本地存储的数据（如www.example.org，www.example.org:80，www.example.org/abc/，www.example.org/xyz/）将被清除。然而，就存储来说，abc.example.org不会受到影响。但对于会话存储，它只会清除当前会话存储。

一个简单的例子

为了演示网络存储的行为，我用本地存储和会话存储创建了一个简单的例子。查看Web存储演示页面。演示页要求你输入两个字符串，一个是会话存储，一个是本地存储。你可以在Opera Dragonfly中打开Storage Inspector去访问Web Storage。你将会注意到，一旦你关闭并再打开页面，你键入到本地存储的数据将保存，而会话存储就完全不同。

使用存储事件

该规范还提供了存储事件，它在存储区域发生改变时触发。这里提供了各种有用的属性，如：

• storageArea：说明它是何种类型的存储（会话或本地）；
• key : 正被改变的键值；
• oldValue : 旧的键值
• ；
• newValue : 新的键值；
• url : 键值更改后的网页的URL。

如果调用clear()方法，key、oldValue、newValue属性将为null。这是前面提到的演示页的修订版本，这次我们使用存储事件告诉用户该值的变化。如果你输入一个值，然后再次改变它，你将看到一个alert提示显示旧值和新值。

在我得浏览器中，在何处能详细接触网络存储数据

在Opera 10.50中，有几个方法可以做到这一点。你可以在地址栏中输入opera:webstorage 和opera:config#PersistentStorage去访问更高层次的网络存储的详细信息（存储的限制、存储的地方等等），但对于开发者来说，有一个更好的工具能得到一个特定页面关于网络存储的详细信息－－通过Opera Dragonfly的storage Inspector，它向你提供了更多的详细信息。

Opera 10.50有一个新的改进的Opera Dragonfly调试工具，包括（我们最近发布的一个开源项目）。其中修正的、改进的和新的特色就是Storage Inspector。这给开发人员一个单独的标签去访问一个页面的cookie、本地存储和会话存储的信息。打开Opera Dragonfly并单击Storage 标签进行访问。

关于网络存储需要记住的是：

• 单域存储：全部来自同一源的存储将共享相同的存储空间。一个源是一组scheme/host/port （或一个全局唯一标识符）。例如， http://www.example.org和http://abc.example.org是两个不同的源，http://example.org和https：/ / example.org以及http example.org：80和http://example.org:8000 也是一样。
• 存储限制：到目前为止，大多数浏览器支持网络存储，包括Opera已经设置了每个域5MB的存储限制。通过在会话存储或本地存储从一个域中存储一些数据，你可以基于每个域改变Storage limit，然后前往opera:webstorage （注：该句翻译欠佳）。那个域将会出现在列表中，你可以单击它访问数据和选项，包括存存存储到那个域数据大小、存储限制以及超过限制时浏览器如何处理。
• 安全考虑和相关的最佳做法：存储是基于每个域来分配的。有人可能会使用DNS欺骗，使它们看起来像一个特定的域，而事实上他们不是，从而获得在用户计算机访问该域的存储区域。SSL可以用来以防止这种情况的发生，因此用户完全可以相信他们正在查看的网站在相同的域名中。
• 什么地方不用它：如果两个不同的用户使用的是单域上不同的路径名，他们可以访问整个域中的存储区域，因此可以访问彼此的数据。因此，建议处在免费空间下的用户在同一域中的不同目录下建立自己的站点（例如：freehostingspace.org/user1 /和freehostingspace.org/user2 /），在自己的页面中暂时不要使用网络存储。
• 网络存储不是HTML5规范的一部分：它本身就是一个完整的规范。

原文地址：http://dev.opera.com/articles/view/web-storage/

转载地址：http://www.denisdeng.com/?p=836