HTML5的在本质上Web存储
背景
Web存储（也称为DOM存储）带来了两个品牌的新对象:sessionStorage和localStorage。 {A}"。它们是:第一是专为用户进行单一交易的场景，但可以在不同的窗口，同时进行多个交易。第二个存储机制是专为储存跨越多个窗口，并持续超越本届会议。特别是，Web应用程序可能希望存储用户数据，如用户创作的整个文件或用户的邮箱，客户端性能方面的原因，兆字节。
sessionStorage和localStorage是在HTML5 W3的介绍，以解决上述问题，让我们开始检讨如何曲奇目前工程。当前的HTTP状态存储？？机制
一个HTTP cookie是一套键/值对其中一个的HTTP的Web服务器请求一个具体的客户端浏览器（即用户代理 - UA）来存储客户端的硬盘上，时的UA的请求的网站服务器进一步，UA将只要下列条件都满意的包装内的所有HTTP请求报头的cookie数据:没有过期的cookie数据。cookie是存储时，被请求域是完全相同的域下。域下的请求路径是同一个存储的cookie。
一旦cookie过期，浏览器会从本地硬盘中删除它。
常见的cookie的例子:
最终用户类型在浏览器的导航栏点击进入。
返回HTTP状态200消息（绿色部分，预计Web服务器客户端浏览器来存储两个cookie的键/值对:WayneKey1 =值; WayneKey2 =值2，他们可以从整个域的访问，并他们将于1年后）:
HTTP/1.1 200 OK
Content-type: text/html
<span style="COLOR: green">Set-Cookie: WayneKey1=value1;WayneKey2=Value2;domain=www.foo.net;
expires=Tue, 24-Feb-2012 07:13:22 GMT; path=/; HttpOnly</span>
(Response HTTP body)
浏览器接收HTTP响应和纯文本到用户的硬盘中cookie的键/值存储。
用户做了一些交互，并要求回，浏览器将换到请求的HTTP头的cookie数据。{C}
注:在上面的＃4，如果客户端浏览器不支持Cookie或Cookie是由用户禁用，回退机制可能通过HTTP Web服务器实现，这通常可以存储在URL中的Cookie数据（实例例如ASP.NET可以支持URL中存储的cookie设置Cookie的="; UseUriquot;在web.config中，请参阅:），或者，Web服务器将不会允许客户端使用的特点。
基于一个服务器分配的会话ID存储在客户端的cookie，Session对象是广泛使用在所有流行的Web服务器，存储在服务器端的临时数据（可能是内存，数据库或专用会议存储服务器等），禁用cookie的情况下客户端，Web服务器可能采取上述同样的策略（URL中存储的cookie），或相反，他们不容许客户使用的特点，除了客户端获取的cookie启用。情况
如今无数的网站（例如谷歌，Facebook，亚马逊，"纽约时报"）依赖于HTTP cookie来存储数据，如用户的偏好，登录信息，购物车等。如果您在您的浏览器禁用Cookie，并尝试访问很多非常流行的Web应用程序（如在Facebook，Twitter，Gmail中，亚马逊等）今天，你可能会看到下面的截图:
{S0}
{S2}
在一个字，Cookie的启用是一项强制性的条件，使用这些网络巨头。Cookie的缺点
我调查，并总结出了下面列出（包括两个W3C的开头提到的几点）的Cookie的缺点:尺寸和计数限制
大多数浏览器有限的cookie大小为4096字节和300内最大的cookie数域。 IETF建议的限制标准，是指: 6.3节。性能命中
如果一个网站使用cookie，那么每一个HTTP请求/服务器/浏览器之间的响应必须包括在HTTP头中的所有Cookie键/值对。安全
Cookie是存储在用户的本地硬盘感叹文本。如果开发商没有妥善处理，可能发生。存储能力为多个相同的Web应用程序
的Cookie的实例的数据分别是不容易处理一个使用案例:相同的Web应用程序运行在不同的窗口，不互相干扰的情况下单独的实例（sessionStorage是嘛支持，我会在这个岗位描述后）。Web存储机制
的cookie，服务器/客户端之间传递，他们都可以通过访问不同，sessionStorage / localStorage 100％，在客户端存储一个具体的浏览器，sessionStorage暂时储存在一个HTTP会话数据，localStorage存储到客户端数据永久硬盘。它的优点是显而易见的:
数据不会通过通过HTTP请求/响应，带宽将被保存。
不会有4KB的限制，网站具有更大的灵活性，以大型数据存储在客户端。注:W3C的"建议5兆字节每domainquot localStorage大小的限制，并"欢迎feedbackquot;，这是远远大于4KB的Cookie限制。现在，不会通过网络传递数据，这将是相对更安全。进一步考虑按＃3，一些现有的HTTPS连接在理论上可以使用普通的HTTP通过Web存储，是因为没有需要对数据进行加密，数据存储在客户端。由于HTTPS通常只有10％的性能，与HTTP相比，最终无论是性能将得到改善或保存成本（采购更便宜的服务器硬件）。
在我的愚见，Web存储是在HTML5的最大特点，我相信在不久的将来它会导致一个HTTP Web状态存储革命！为什么呢？考虑下面列出的几个故事，我想他们很可能会很快发生！带宽节省。你有一种流行的电子邮件服务的Web应用程序的电子邮件帐户，并使用它在一个具体的浏览器访问您的第一时间，每天。它存储到您的浏览器的本地存储300个联系人名单以及最新的20个电子邮件线程（第一页），和数据需要在全长约8千字节。在今后的访问，这8千字节不会被转移到电子邮件服务器。没有下载时间=更好的UX操作系统。从你喜欢上一种流行的视频网站，它记录的视频列表（默认情况下，10最新观看视频），你看过，以及索引的实时视频流数据看录像。每次访问的网站，你的能力，以查看您的观看历史和最重要的，你可以重新在第二个列表观看任何视频？？从您的本地存储。冲浪相同的网站，同时使用多个帐户。出于某种原因，你注册了一个网站，它使用会话存储的两个帐户，并在两个浏览器标签和隔离的互动，你可以用这两个帐号登录。例如，检查在两个标签同时使用两个Gmail帐户的Gmail。在JavaScript中操作存储存储接口
两个sessionStorage / localStorage从一个接口存储继承，它定义在Web存储规格:interface Storage {
readonly attribute unsigned long length;
DOMString key(in unsigned long index);
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any value);
deleter void removeItem(in DOMString key);
void clear();
};
首先，我们需要检查一个具体的浏览器是否支持每个 Web存储与否，IE8（IE8不支持存储事件，而IE9的RC支持），火狐3.5浏览器Safari 4.0浏览器4.0所有支持Web存储。我们可以写一个简单的JS函数，检查客户端浏览器是否支持Web存储或不:
function supportsLocalStorage() {
return ('localStorage' in window) && window['localStorage'] !== null;
}
if(supportsLocalStorage()) {
// Web Storage invocation here
}
else {
alert('Sorry, your browser does not support Web Storage');
}
如果浏览器不支持，然后调用sessionStorage和localStorage在JavaScript中是相当容易的。示例代码演示的set / get /删除/存储显示如下项目:// Set/Get locallStorage
localStorage.{key} = strValue;
var localVal = localStorage.{key};
// Set/Get sessionlStorage
sessionStorage.{key} = strValue;
var sessionVal = sessionStorage.{key};
// Remove an storage item
localStorage.removeItem('key')
sessionStorage.removeItem('key')
// Clear storage
localStorage.clear();
sessionStorage.clear();
请知道的一件事:sessionStorage和localStorage只能存储DOM字符串值，如果我们想保存到他们的JavaScript对象，答案是肯定的JSON字符串，和
延长Storage.setObject / GETOBJECT通过使用JavaScript的原型的方法，代码所示:Storage.prototype.setObject = function (key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function (key) {
return this.getItem(key) && JSON.parse(this.getItem(key));
}
// By extending Storage's prototype above, just simply add/get
// JavaScript object into Storage
localStorage.setObject('key',objValue);
localStorage.getObject('key',objValue);
sessionStorage.setObject('key', objValue);
sessionStorage.getObject('key', objValue);
我附加WebStorageDemo显示如何存储到DOM String和JSON字符串sessionStorage / localStorage，代码片段，并显示下面的截图:
储存到sessionStorage一些假冒购物车项目:function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
function Guid() {
return (S4() + S4() + "-" + S4() + "-" + S4() +
"-" + S4() + "-" + S4() + S4() + S4());
}
function ShoppingCartItem() {
this.ProductID = Guid();
this.ProductName = '';
this.CategoryID = -1;
this.Price = -1.0;
}
// Fake items in shopping cart, and store into sessionStorage
var item1 = new ShoppingCartItem();
item1.ProductName = 'HP WebOS Topaz';
item1.CategoryID = 8;
item1.Price = 849.99;
var item2 = new ShoppingCartItem();
item2.ProductName = 'Apple Ipad II';
item2.CategoryID = 10;
item2.Price = 799.99;
var currentUserShoppingCart = new Array();
currentUserShoppingCart[0] = item1;
currentUserShoppingCart[1] = item2;
sessionStorage.setObject('UserShoppingCart', currentUserShoppingCart);
{S3}钻研深入sessionStorage / localStorage机制
正如我所提到的在一开始，无论是sessionStorage / localStorage"100％存储在客户端通过一个具体browserquot;，它们之间的区别是，sessionStorage是孤立的，而窗口/标签localStorage是跨页下一个域共享换句话说，sessionStorage需要照顾，将临时数据存储在一个HTTP会话的生命之一的浏览器窗口/标签，每个窗口/选项卡可以保持其自己的会话数据发生时间;虽然数据localStorage店到用户的硬盘磁盘，所有下页依然存在这个具体领域可以操纵localStorage。
再次让我们看到一个演示，我添加了一个存储到sessionStorage自然数的计数器，和一个可点击的按钮可以增加计数器，下面的代码:<input type="button" value="Counter++" 枚nclick="sessionStorage.Counter++;" />
和我打开页面的两个实例，分别在每一页上单击计数器，然后我们将看到他们每个人保持自己的计数器:
的
相反，在localStorage中存储的数据可以在同一域中的所有网页访问，如下所示的演示，最初我插入一个假USERPROFILE localStorage，然后打开另一个网页，其中有不同的路径，但在同一域，我们将看到的第一页存储USERPROFILE可以检索。
{五}
注释:localStorage既然是共享的，因此它可能是由多个页面操纵同时，W3强调，浏览器应该实现存储互斥，以确保线程安全localStorage。
通过实现这些机制，sessionStorage / localStorage应该更直进，有效和安全的方式来取代饼干。存储事件
W3的定义StorageEvent界面如下:interface StorageEvent : Event {
readonly attribute DOMString key;
readonly attribute any oldValue;
readonly attribute any newValue;
readonly attribute DOMString url;
readonly attribute Storage storageArea;
void initStorageEvent(in DOMString typeArg, in boolean canBubbleArg,
in boolean cancelableArg, in DOMString keyArg, in any oldValueArg,
in any newValueArg, in DOMString urlArg, in Storage storageAreaArg);
};
最著名的浏览器（最新版本）已实施StorageEvent，见下面的截图如下:
{中六}
通过阅读他们的文档:，这是行不通的！所以我在IE 9 RC展示StorageEvent，在下面的代码，我赞同tonbsp;存储事件，一旦sessionStorage / localStorage项目得到了改变，我检查存储的关键，以确定进一步的反应:if (window.addEventListener) { // IE9, FF, Chrome, Safari, Opera
window.addEventListener('storage', onStorageChanged, false);
}
else if (window.attachEvent) {
window.attachEvent("onstorage", onStorageChanged); // IE 8
}
else {
alert('Sorry, your browser does not support DOM event subscription!');
return;
}
function onStorageChanged(e) {
if (e.key != '') {
switch (e.key) {
case 'Counter': // Counter stored in sessionStorage
$('spCurCounter').innerHTML = 'Current Session Counter: ' + e.newValue + '';
break;
case 'UserShoppingCart':
break;
case 'UserProfile': // UserProfile stored in localStorage
break;
default:
$('informationBar').innerHTML += 'New localStorage object added,
Key: [<span style="color: red; ">' + e.key + '</span>]
Value: [<span style="color: red; ">' + e.newValue + '</span>].
';
break;
}
}
}
下面的GIF显示，当我插入一个新的对象localStorage，onStorageChanged功能是在两个页面同时触发，并同时显示新插入的数据:
{七}
注:，由于数据存储在localStorage可以访问域下所有页面实例，这些页面实例可以监测的变化（StorageEvent）同时，我们可以实现quot;数据传递，跨越非常相同的timequot页，这是真的很难做事先。存储位置/格式
让我们终于考虑如何浏览器存储localStorage:位置和数据格式。让我们在Windows 7上的IE9和谷歌浏览器为例，见下表:浏览器localStorage位置数据格式IE 9的RC％USERPROFILE％\应用程序数据\地方\微软\的Internet Explorer \ DOMStore \感叹的XML铬％USERPROFILE％\应用程序数据\本地\谷歌\铬\用户数据\ DEFAULT \本地存储SQLite的
IE 9的实际存储localStorage项目一个简单的XML文件，下面是XML存储在我的演示USERPROFILE对象:<root>
<item
name="UserProfile"
value="{"NickName":"Wayne","EmailAddress"
:"WebMaster@WayneYe.com"}"
ltime="3439488560"
htime="30135140" />
</root>
铬商店{A12}两列简单的数据库表中的数据:键和值，下面的截图:
{S8}演示代码Notesnbsp;
请下载{A13}。
请注意，如果你测试我的连接的演示，或尝试在IE 9中的存储与Web相关的任何代码，请确保你在你的HTML头中添加X - UA -能力的元信息，或明确设定浏览模式/文件模式，以在IE浏览器开发工具的Internet Explorer 9的标准，否则你可能看到的JS错误，因为IE浏览器6,7不承认sessionStorage / localStorage。<meta http-equiv="X-UA-Compatible" content="IE=9" />
{S9}结论
的HTTP cookie相比，HTML5 Web存储机制提供了相对更加方便，灵活，安全和速度更快的方式来存储HTTP状态数据，它应该逐渐取代HTTP cookie的，尤其是时下最流行的Web浏览器支持它（虽然可能有几个问题，如StorageEvent我上面提到的），他们不符合W3C标准的数据存储在sessionStorage / localStorage。伊恩希克森"预计HTML 5成为{A14}在2012quot阶段;，让我们期待和兴奋，看看事情在不久的将来。进一步阅读{A15}{A16}{A17}{A18}{A19}{A20}{A21}{A22}
最初发布于: {A23}