相信你已经对HTML5的数据存储有过了解或者是深入的了解，但是还是要在此略提一下HTML4与HTML5的数据存储。
HTML4的数据存储主要有cookie存储和session存储，这两种存储都有时间和大小的限制，大多数浏览器对cookie的限制最多不能超过4096个字节（4KB），且cookie的数量总共不得超过300个，单个域或本地的cookie不得超过20个，这样的限制已经完全无法满足如今的WEB2.0站点的需求（详见MDC cookie介绍）。
HTML5的数据存储在HTML4的基础上多了3个，分别是本地数据存储、session存储、离线存储，这篇文章主要讲本地数据存储和session存储。
HTML5的localStorage和sessionStorage都是通过key-value的数据格式做数据存储的。
首先我们来看一下HTML5的本地存储与session存储的区别：

localStorage：
适用于长期限的存储，在窗口关闭后数据仍然存留且在同域下数据存留在多个页面中，也就是说使用localStorage存储数据，支持HTML5本地存储的浏览器会在用户的本地分配空间用于永久性存放指定的数据，且这些数据是在同一个域名下共享的，比如mobile.alipay.com中的本地存储的数据在mobile.alipay.com/mkt中依然可以访问到。
sessionStorage：
适用于存储短期的数据，在同域中无法共享，并且在用户关闭窗口后，数据将清除。
sessionStorage数据在同域中无法共享这一特性将在未来可能改变—-允许像本地存储一样在同域中共享。
除了以上提到的这些不同点以外，HTML5的localStorage和sessionStorage表现的几乎一样。
这两种数据在用户浏览期间不能够像cookie一样传送到服务器，如果你需要把数据发送服务器，你必须要使用XMLHttpRequest对象做异步传输。

请注意这个潜在的数据存储池在localStorage和sessionStorage之间并不能共享，因此你可能会从sessionStorage对象中读取localStorage对象中的数据，甚至遭受到恶意攻击，所以为避免混淆、数据错乱，你应该在这两个存储对象中使用不同的Key，这一点非常重要！！！

下面我们来看看如何使用这两个存储对象，在此说明这两个存储对象的方法是一样的，所以哥在此使用sessionStorage做范例演示，你也可以把sessionStorage修改为localStorage。
更为具体详细的使用方法请参考W3C WEBSTORAGE（你应该阅读）

存储数据
记住HTML5的数据存储对象都是以key-value形式存储数据的！存储数据可使用setItem方法，这个方法带有两个参数，第一个参数是数据key，第二个参数是数据value，比如我需要存储用户的手机的userAget，代码应该像这样：

var ua = navigator.userAgent;

sessionStorage.setItem('ua',ua);

如果存储的数据已经达到浏览器指定的限额，你的代码应该抛出一个异常，或者用户禁用了浏览器的数据存储，

var ua = navigator.userAgent;
try{
  sessionStorage.setItem('ua',ua);
}catch(e){
  if(e === QUOTA_EXCEEDED_ERR){
    alert('无法存储数据，数据量超限');
  }
}

获取数据
获取数据非常简单，你可用使用getItem方法，传递给它一个指定的key参数，像这样：

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

var len = sessionStorage.length;//获取当前存储的数据数量

删除数据
删除数据同样很简单，你可用使用removeItem方法和clear方法，传递给removeItem一个指定的key参数，像这样：

sessionStorage.removeItem('ua');

如果你想删除所有存储的数据，可以像这样：

sessionStorage.clear();

触发存储事件
像cookie一样存储对象是一个共享的资源作用在同域下，所有同域下的页面共享一个本地存储的数据，框架和内联框架也共享相同的本地数据，因为他们都是同域的，都是来源于一个共同的窗口。
因为这些数据源在同域下是共享的，javascript脚本运行在多个页面中的上下文中，在其中一个页面的上下文中修改本地存储的数据可能会影响到其它页面中的数据，在数据被修改后，你的脚本应该做出改变或者通知，否则可能会有意想不到的结果，这种现象仅会出现在localStorage对象中。
你应该在同域下的页面中注册storage事件，代码如下：

window.addEventListener('storage',fnStorageHandle,false);

一旦你的页面有注册storage事件，当你同域下的任何一个页面中出现本地数据被修改，那么这个事件将会触发，在这里这个事件叫做fnStorageHandle。

function fnStorageHandle(e){

  alert(e.key);//key的名称

  alert(e.oldValue);//数据修改前的值

  alert(e.newValue);//新的数据值

  alert(e.url);//数据在何处被修改，也就是触发修改数据脚本所有的页面地址

  alert(e.storageArea);//数据存储对象

}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！