Web Storage, Web SQL Database 和 IndexedDB

HTML5 的几种存储方式，可以说是Cookies的替代品，解决了Cookies存储量小(仅4k) 的问题。此外，Cookies会包含在每次HTTP请求中，使用HTML5的存储方式也可以避免多余的数据传输。简单介绍一下这几种存储方式：

1，Web Storage

Web Storage (DOM Storage) 可存储5M数据，包括 localStorage, sessionStorage, globalStorage(非标准，目前已不再支持)。 存储数据格式为 key/value 对，使用方式很简单：

window.localStorage.setItem('test', 'html5');
window.localStorage.getItem('test');   //  html5
window.localStorage.key(0);   //  test
window.localStorage.removeItem('test');
window.localStorage.clear();

也可以直接操作对象（不推荐）：

window.localStorage['test'] = 'html5';

同域名的页面共享localStorage，sessionStorage，其中sessionStorage仅存在于同一个session。

浏览器对Web Storage 的兼容情况 （图片来自 MDN [2]）：

2，Web SQL Database

直接在js中使用sql语句来操作 sqlite 数据库的存储方式。W3C已不再维护此标准。
使用方式：(代码来自 [4] )

var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
    tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
});

3， IndexedDB

数据存储为对象，和 Web Storage简单的 key/value 相比有更多的层级结构，也避免了 Web SQL Storage直接写 sql 语句的不便。

使用方式（代码来自MDN [3] ）：

const customerData = [
    { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
    { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];
const dbName = "the_name";
 
var request = indexedDB.open(dbName, 2);
var db;
request.onsuccess = function(event) {
    db = request.result;
    var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
    db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
        alert("Name for SSN 444-44-4444 is " + event.target.result.name);
    };
};
request.onerror = function(event) {
  // Handle errors.
};
request.onupgradeneeded = function(event) {
    var db = event.target.result;
    var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("email", "email", { unique: true });
    for (var i in customerData) {
        objectStore.add(customerData[i]);
    }
};

浏览器对IndexedDB的兼容情况 （图片来自MDN [5]）

参考资料
[1]   http://diveinto.html5doctor.com/storage.html
[2]   https://developer.mozilla.org/en-US/docs/DOM/Storage
[3]   https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
[4]   http://html5doctor.com/introducing-web-sql-databases/
[5]   https://developer.mozilla.org/en-US/docs/IndexedDB