综上考虑，最后采用浏览器自带的indexedDB，足够满足要求，漫游接入成本，升级方便，调试方便。

本地存储出现后，有了下面一些标准化的更简单的方法：

indexedDB定义了许多对象接口，即API，除了上面介绍的一些，更完善的接口介绍可以参考MDN的介绍。

打开数据库

使用 IndexedDB 的第一步是打开数据库，使用indexedDB.open()方法如下。

1

var request = window.indexedDB.open(databaseName, version);

其中第一个参数为数据库名，第二个参数是数据库版本号。 indexedDB.open() 方法返回一个 IDBRequest 对象。这个对象通过三种事件error、success、upgradeneeded，处理打开数据库的操作结果。

如果数据库不存在，open操作会创建该数据库，然后 onupgradeneeded 事件被触发，需要在该事件的处理函数中创建数据库模式。如果数据库已经存在，但指定了一个更高的数据库版本，会直接触发 onupgradeneeded 事件，允许你在处理函数中更新数据库模式。

注意：这里的版本号是一个unsigned long long数字，使用浮点数是会被转化到最近的整数

绑定处理函数

几乎所有我们产生的请求我们在处理的时候首先要做的就是添加成功和失败处理函数。

1
2
3
4
5
6

request.onerror = function(event) {
  // Do something with request.errorCode!
};
request.onsuccess = function(event) {
  // Do something with request.result!
};

如果一切顺利的话，相关request的 onsuccess() 处理函数就会被触发。如果不是所有事情都成功的话， error 事件会在request上被触发。

新建数据库

新建数据库与打开数据库是同一个操作。不同之处在于，后续的操作主要在 upgradeneeded 事件的监听函数里面完成。通常新建数据库后，第一件事是新建对象仓库，即下面这样：

1
2
3
4
5
6
7

request.onupgradeneeded = function (event) {
  db = event.target.result;
  var objectStore;
  if (!db.objectStoreNames.contains('person')) {
    objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}

上面这段语句使用id作为对象仓库的主键，如果没有合适作为主键的属性，可以让indexedDB自动生成主键。为了便于查询，可以在数据仓库中建立索引。

1
2
3
4
5
6

var objectStore = db.createObjectStore(
  'person',
  { autoIncrement: true }
);
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });

增删改查都通过事务进行。事务来自于数据库对象，必须指定你想让这个事务跨越哪些对象仓库。事务中有三种模式，表示你想对数据库进行的操作类型：

只在必要时指定 readwrite 事务。你可以同时执行多个readonly事务，哪怕它们的作用域有重叠；但对于在一个对象仓库上只能运行一个readwrite事务。

增加一条数据的语句如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

var transaction = db.transaction(["person"], "readwrite");

// 在所有数据添加完毕后的处理
transaction.oncomplete = function(event) {
  alert("成功");
};

transaction.onerror = function(event) {
  alert("失败");
};

var objectStore = transaction.objectStore("person");
    .add({ id: 1, name: 'foo', email: '[email protected]' });

在有了数据后，可以通过几种方法对它进行提取。首先是简单的 get() ，通过键获得值。

1
2
3
4
5
6
7
8
9
10

var transaction = db.transaction(["person"]);
var objectStore = transaction.objectStore("person");
var request = objectStore.get(1);
request.onsuccess = function(event) {
  // 对 request.result 做些操作！
  alert(request.result.name);
};
request.onerror = function(event) {
  alert('出错了');
};

在很多场景下你并不知道数据的键，这时可以用索引找到你要的数据。例子中的 name 属性可能并不是唯一的，在这种情况下，你总是得到键值最小的那个。

1
2
3
4
5
6

// 前提是你已经建立了name索引
var index = objectStore.index("name");

index.get('foo').onsuccess = function(event) {
  alert("foo's id is " + event.target.result.id);
};

在需要遍历某一范围的数据集合时，也可以使用 游标 ，这里要用到 openCursor 方法。比如查询整个数据对象存储。

1
2
3
4
5
6
7
8
9
10

objectStore.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    console.log(cursor.value);
    cursor.continue();
  }
  else {
    alert('遍历结束');
  }
};

上面的功能也可以通过 getAll 完成，但是由于数据对象是懒生成的， getAll 性能会有消耗。当然你如果想直接拿到整个数据组成的数组，还是 getAll 好点

结合索引（IDBIndex）和游标（IDBCursor）可以查询指定索引的所有记录，方法 openCursor 和 openKeyCursor 分别返回不同的数据结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

index.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.key 是一个 name, 就像 "Bill", 然后 cursor.value 是整个对象。
    alert("Name: " + cursor.key + ", email: " + cursor.value.email);
    cursor.continue();
  }
};

index.openKeyCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.key 是一个 name, 就像 "Bill", 然后 cursor.value是主键的值。
    // 没办法得到存储对象的其余部分。
    alert("Name: " + cursor.key + ", id: " + cursor.value);
    cursor.continue();
  }
};