HTML5本地存储不完全指南

摘要：本文将为您详细讲述HTML5的本地存储。

　　历史

　　在HTML5本地存储之前，如果我们想在客户端保存持久化数据，有这么几个选择：

1. HTTP cookie，HTTP cookie的缺点很明显，最多只能存储4KB的数据，每个HTTP请求都会被传送回服务器，明文传输（除非你使用SSL）。
2. IE userData，userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案，借助DHTML的behaviour属性来存储本地数据，允许每个页面最多存储64K数据，每个站点最多640K数据，userData的缺点显而易见，它不是web标准的一部分，除非你的程序只需要支持IE，否则它基本没什么用处。
3. Flash cookie，Flash cookie的名字有些误导，它实际上和HTTP cookie并不是一回事，或许它的名字应该叫做Flash本地存储，Flash cookie默认允许每个站点存储不超过100K的数据，如果超出了，Flash会自动向用户请求更大的存储空间，借助Flash的ExternalInterface接口，你可以很轻松的通过Javascript操作Flash的本地存储，Flash的问题很简单，就是因为它是Flash。
4. Google Gears，Gears是Google在07年发布的一个开源浏览器插件，旨在改进各大浏览器的兼容性，Gears内置了一个基于SQLite的嵌入式SQL数据库，并提供了统一API对数据库进行访问，在取得用户授权之后，每个站点可以在SQL数据库中存储不限大小的数据，Gears的问题就是Google自己都已经不用它了。

　　现状

　　我们现在通常所说的HTML5本地存储，一般指的是Web Storage规范，这个标准曾经是HTML5规范的一部分，但后来因为种种原因从HTML5规范中分离了出来，但是除了Web Storage，HTML5的本地存储标准还有另外2个竞争者：Web SQL Database和IndexedDB，下面就让我们依次来看看这3个规范吧。

　　Web Storage

　　Web Storage是目前得到支持最广泛的HTML5本地存储规范：IE 8+，FF 3.5+，Safari 4+，Chrome 4+，Opera 10.5+，以及iPhone 2+和Android 2+都已经支持Web Storage，要判断你的浏览器是否支持Web Storage，可以使用下面这个函数：

function  supports_html5_storage() { 
      try  { 
           return  ' localStorage '  in  window  &&  window[ ' localStorage ' ]  !==  null ; 
     }  catch  (e) { 
           return  false ; 
     } 
}

　　HTML5 Storage的使用非常简单：

var  foo  =  localStorage.getItem( " bar " ); 
//  ... 
localStorage.setItem( " bar " , foo);

　　你也可以写成下面这样：

var  foo  =  localStorage[ " bar " ]; 
//  ... 
localStorage[ " bar " ]  =  foo;

　　如果要将某个key从存储空间删除，可以调用removeItem：

localStorage.removeItem( ' foo ' );

　　你也可以像遍历数组那样遍历存储的所有键值对象：

for ( var  i = 0 ; i< localStorage.length; i++){

    var key  =  localStorage.key(i); 
    console.log(key  + " : " +  localStorage[key]); 
}

　　如果你的程序需要在不同页面访问同一个值，你可能需要了解这个值是否已经被其它页面改变了，这可以通过向浏览器注册storage事件来实现：

window.addEventListener( ' storage ' ,  function (e) { 
　　console.log(e.key  +  " 's value is changed from ' "  +  
　　e.oldValue  +  " ' to ' "  +  e.newValue  +  " ' by  "  +  e.url); 
},  false ); 

// A页面 
localStorage[ ' foo ' ]  = ' bar ' ; 

// B页面 
localStorage[ ' foo ' ]  = ' newBar ' ;

　　这时你应该会在A页面的Console中看到：

　　foos value is changed from bar to newbar by http://localhost/test.html

　　要注意的是，storage事件仅仅只是通知你某个键对应的值已经发生了改变，你没有办法在回调中阻止这个改变发生。

　　HTML5 Storage看起来不错，那它有没什么缺点呢，好问题，要说HTML5 Storage的缺点，唯一的问题就是它默认的QUOTA只有5MB，并且你没办法通过程序自行或是提示用户来增加存储空间，唯一的办法就是用户自己打开浏览器的设置，并手动修改QUOTA的大小，如果超出了5MB的限制，你将会遇到一个QUOTA_EXCEEDED_ERR的错误。

　　Web SQL Database

　　Web SQL Database是一个已经废弃的规范，但是鉴于除了IE和Firefox，其它浏览器都已经实现了Web SQL Database，并且它还具有一些HTML5 Storage所不具有的特性，所以还是值得了解一下的。

　　Web SQL Database就像它的名字那样，就是一个让你可以在Web上直接使用的SQL数据库，你要做的就是打开数据库，然后执行SQL，和你对MySQL做的事情没什么两样：

openDatabase( ' documents ' ,  ' 1.0 ' ,  ' Local document storage ' ,  5 * 1024 * 1024 , 
function  (db) { 
　　db.changeVersion( '' ,  ' 1.0 ' ,  function  (t) { 
　　　　t.executeSql( ' CREATE TABLE docids (id, name) ' ); 
　　}, error); 
});

　　关于Web SQL Database的更多介绍，可以参看这篇指南。

　　但是它的缺点也同样明显，最大的问题就出在SQL上，实际上并不存在一种叫做SQL的标准结构化查询语言，我们平常使用的实际上是MS SQL，Oracle SQL，MySQL SQL，postgre SQL或者SQLite SQL（尽管有一个叫做SQL-92的规范，但它基本形同虚设），更进一步，甚至都不存在SQLite SQL，我们使用的实际上是SQLite x.y.z SQL，而这也就是Web SQL Database最大的问题，它无法统一各个浏览器厂商实现的SQL语言，如果你的某条Web SQL查询只能在Chrome上运行，这还能叫做标准吗？

　　所以，如果你现在访问Web SQL Database的规范页面，你会在顶部看到这样一则声明：

这个规范已经陷入了一个僵局：目前的所有实现都是基于同一个SQL后端（SQLite），但是我们需要更多的独立实现来完成标准化，所以除非有厂商愿意独立实现这个规范，否则当前的SQL规范只能采用SQLite的SQL方言，而作为一个标准，这是不可接受的。

　　IndexedDB

　　最后我们要介绍的就是IndexedDB了，相比其它两个规范，目前只有Firefox实现了IndexedDB（顺便提一下，Mozilla表示它们永远不会去实现Web SQL Database），不过Google已经表示正在考虑在Chrome中加入IndexDB支持。

　　IndexedDB引入了一个object store的概念，这有点像是一个SQL Database，你可以在数据库中存储记录，并且每条记录可以拥有很多字段，每个字段都有一个特定的数据类型，你可以选择记录的子集，并使用光标进行遍历，同时object store中的所有变更都是基于事务的。

　　下面让我们来看一个小例子：

var request = window.indexedDB.open("CandyDB",
"My candy store database");
request.onsuccess = function (event) {
    var db = event.result;
    if (db.version != "1") {
        // User's first visit, initialize database.
        var createdObjectStoreCount = 0;
        var objectStores = [{ name: "kids", keyPath: "id", autoIncrement: true },
        { name: "candy", keyPath: "id", autoIncrement: true },
        { name: "candySales", keyPath: "", autoIncrement: true}];

        function objectStoreCreated(event) {
            if (++createdObjectStoreCount == objectStores.length) {
                db.setVersion("1").onsuccess = function (event) {
                    loadData(db);
                };
            }
        }

        for (var index = 0; index < objectStores.length; index++) {
            var params = objectStores[index];
            request = db.createObjectStore(params.name, params.keyPath,
params.autoIncrement);
            request.onsuccess = objectStoreCreated;
        }
    }
    else {
        // User has been here before, no initialization required.
        loadData(db);
    }
};

　　关于Indexed的更多介绍可以参看Mozilla Blog的这篇指南。

　　--------------------------------------------

　　本文编译整理自：Mark Pilgrim的Dive Into HTML5 第七章 HTML5本地存储

　　编译：@yuanyiz

　　转载请遵照 CC-BY-3.0协议