HTML5提供了两种在客户端存储数据的新方法：
- Local Storage（本地存储）- 没有时间限制的数据存储
- Session Storage - 针对一个session的数据存储
之前，这些都是由cookie完成的。但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢而且效率也不高。
在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 Local Storage（本地存储）为在浏览器中存储数据成为可能，这些数据可以在浏览器的session中存活，类似于cookies。本地存储还可以在两个浏览器窗口之间相互发送事件，是一个非常有用的特性。
数据存储是一个新的HTML规范，确切的说它并不是HTML5规范的一部分。但是数据存储和HTML5被发布于相同的时间，因此它通常被认为是HTML5的一部分。
基本的数据存储
数据存储使用的是简单的键值对方式，就像一个哈希表或词典对象。正如前面所提到的，数据存储分为Local Storage和Session Storage两种。
Session storage只要浏览器窗口打开，在同一浏览器窗口内它们都可用。当浏览器窗口关闭时，和这个浏览器窗口关联的Session Storage将被删除。指向同一个源（URL）的多个浏览器不能共享它们各自的Session Storage。由同一个浏览器窗口弹出的其它窗口可以看到它的Session Storage。
Local Storage对于同源（domain）的所有浏览器窗口都是有效的。存储在Local Storage中的数据在浏览器窗口关闭之后仍然可用。在下一次浏览器打开并从相同的源加载页面的时候，页面可以再次访问存储在那里的数据。
sessionStorage和localStorage对象
Session Storage和Local Storage可以通过两个全局的javascript对象来访问：
sessionStoragelocalStorage
sessionStorage对象和localStorage对象的访问方式相同。只是他们的生命周期和存储数据的可见性有所差异。
你可以在sessionStorage和localStorage对象上设置属性，就像普通的js对象一样。下面是一个例子：
sessionStorage.myProperty = "Hello World";
localStorage.myProperty = "Hello World";
上面的例子中，第一行代码设置Session Storage的属性myProperty的值为Hello World。第二行代码设置Local Storage的属性myProperty的值为Hello World。
在Session Storage和Local Storage的属性中你只可以存储字符串。其它的数据类型不能存储。如果你需要存储javascript对象，你必须先将它转换为JSON字符串。
你可以删除一个Session Storage或Local Storage的属性。下面是一个例子：
delete sessionStorage.myProperty;
delete localStorage.myProperty;
你还可以使用下面的3个方法来访问Session Storage或Local Storage的属性。
sessionStorage.setItem ('propertyName', 'value');
sessionStorage.getItem ('propertyName');
sessionStorage.removeItem ('propertyName');
localStorage.setItem ('propertyName', 'value');
localStorage.getItem ('propertyName');
localStorage.removeItem ('propertyName');
以上的3个方法同样只接受字符串值。
在数据存储中进行遍历
你可以遍历Session Storage和Local Storage中存储的键值对，遍历的方法是通过迭代键值对中的键（属性名称）来进行。例如下面的样子：
for(var i=0; i < sessionStorage.length; i++){
var propertyName = sessionStorage.key(i);
alert( i + " : " + propertyName + " = " +
sessionStorage.getItem(propertyName));
}
上面的代码中，sessionStorage.length属性会返回存储在sessionStorage对象中的属性的总数。
函数key()则会返回参数i对应的属性的名称（或键的名称）。
数据存储事件
存储对象会触发一些事件，你可以在程序中监听这些事件。一个存储事件会在你对Session Storage或Local Storage属性进行插入，更新，删除操作时被触发。
对于Session Storage只有在弹出窗口或iframes中这些事件才可见。
对于Local Storage事件对于所有同于的打开窗口都可见，包括弹出窗口和iframes。
添加一个存储事件监听
在存储对象上附加一个事件监听代码类似下面的样子：
function onStorageEvent(storageEvent){
alert("storage event");
}
window.addEventListener('storage', onStorageEvent, false);
onStorageEvent()函数是事件处理程序。
addEventListener()函数监听存储事件并调用事件处理程序函数。
storageEvent事件对象传入事件处理函数类似下面的样子：
StorageEvent {
key; // set属性的名称，例如”changed“
oldValue; // 属性改变之前的值
newValue; // 属性改变之后的值
url; // url of page that made the change
storageArea; // localStorage or sessionStorage,
// depending on where the change happened.
}
你可以在事件处理函数内部访问这些存储事件对象。
