用HTML5轻松完成数据存储

网络存储（Web Storage），是HTML5众多新API中的一类，它要求浏览器提供了一个在用户浏览器上存储数据的方式，而开发者则可以使用JavaScript进行访问和控制。网络存储的存取过程与远端服务器无关，整个过程都发生在用户的浏览器之上。比起Cookies这样极其有限的存储方式，网络存储的空间通常要大很多（IE8的空间为10MB左右）；另外，网络存储的访问方式比起Cookies要简单很多。

本文的代码均来自http://html5doctor.com/storing-data-the-simple-html5-way-and-a-few-tricks-you-might-not-have-known/，如果您在技术细节上有任何疑问，请以原文为准。

网络存储分为两种：本地存储（localStorage）和会话存储（sessionStorage）。这两种存储模式的最大区别在于，本地存储是持久性的存储，该存储只有在用户清理浏览器存储或通过代码进行清理时，才会被删除；而会话存储的生命周期仅仅限定在会话期间，一旦用户关闭浏览器或相关标签，数据即刻清除。值得注意的是，会话存储的存储界限通常都只是标签页级别，同一个域的其它标签页网页，无法共享数据。

数据存取

网络存储是一种键值对的存储方式，在数据的存取方面，两种网络存储没有任何差别。下面来看看数据的存储方法：

• .setItem(key, value)
• .getItem(key)
• .removeItem(key)
• .clear()
• .key(index)
• .length

由于这套API是基于JavaScript的，因此其使用方法极为容易，甚至可以采取这样的方式进行：

localStorage.name = 'Remy';

而在调用和删除时，则是这样：

var a = localStorage.name; // get the data
delete localStorage.name; // delete data
//此时如果再试图获取数据，则得到的是未定义

相关事件

HTML5的网络存储不仅仅提供了一套好用的API，同时也新增了一个storage事件，用以让其它对象获知数据存储的进行，如以下的代码：

function storageEvent(event) {
  event = event || window.event; // 兼容IE8方案
  alert('Yo people! Something just got stored!');
}

if (window.attachEvent) { // 兼容IE8方案
   window.attachEvent('onstorage', storageEvent);
} else {
    window.addEventListener('storage', storageEvent, false);
}

注意，IE8对该事件的支持并没有其它现代浏览器那么好。

但是仅仅是弹窗，还不足以让我们了解到存储的实际情况。我们来看看storage事件的属性都有哪些：

• key – 存储键名
• newValue – 新值
• oldValue – 原值
• url – 发生storage事件的地址
• storageArea – localStorage或sessionStorage

内有恶犬！

到目前为止，网络存储看起来都这么诱人，但诱人不意味着它就真的一切随你所愿，实际上有一些需要我们注意的地方。

• 现有浏览器的存储形式总是字符串。尽管HTML5标准声称网络存储能够存储任何类型的对象，但现有浏览器的实现却几乎都是以字符串的形式来存储的。因此如果你想存储点别的，你得有自己的一套解决方案，比如：
  

  var doctors = [
    'rem',
    'rich_clark',
    'brucel',
    'jackosborne',
    'leads',
    'akamike',
    'boblet'];
  localStorage.doctors = JSON.stringify(doctors);
  
  // 然后呢
  var html5docs = JSON.parse(localStorage.doctors);
  alert('There be ' + html5docs.length + ' doctors in the house');
  

• storage事件不会发生在现场窗口。这是一个陷阱。storage事件在存储的时刻触发，但存储进行的那个窗口/标签页并不会获知，相反，其它窗口监听该事件的对象才能够获知。
• storage事件仅在数据变更时才触发。这一点比较容易理解，因为如果存储的数据无论值还是键，都与原先相同，那么实际上存储是没有发生的。
• 哦，当然，别忘了看看浏览器的支持情况。IE6和IE7是不支持网络存储的，而且没有什么显而易见的兼容措施这里有一个第三方JavaScript补丁，它试图通过Cookies来缓解这一问题。其它一些早期浏览器支持也有问题，比如Safari 3.2、Opera Mobile 10以及Opera Mini。