HTML5本地存储——IndexedDB

在做web开发的时候，有时候需要存储一些缓存数据，避免下次访问的时候重新加载大量数据，如果只是存在session、cookies里面，会很影响速度，并且session和cookies存储的数据都比较简单，不能存储一些结构化的数据，html5提供了一项比较实用的本地存储技术IndexedDB，就像安装在浏览器上的数据库一样，不过使用方式跟普通的数据库有些不一样，完全采用js的方式来实现建立删除数据库以及数据的增删改查。
<pre>
var version=version || 1,db;
//连接数据库(打开句柄)
var request=window.indexedDB.open('mydb',version);
request.onerror=function(e){ console.log(e.currentTarget.error.message); };
//连接成功后
request.onsuccess=function(e){
db=e.target.result;
//创建'数据表'students(应该叫object store,indexedDB中没有表的概念，而是objectStore，一个数据库中可以包含多个objectStore
//objectStore是一个灵活的数据结构，可以存放多种类型数据。也就是说一个objectStore相当于一张表，里面存储的每条数据和一个键相关联。

//我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator）
//也可以不指定。选择键的类型不同，objectStore可以存储的数据结构也有差异
if(!db.objectStoreNames.contains('students')){
db.createObjectStore('students',{keyPath:"id"});
}
var students=[{
id:1001,
name:"Byron",
age:24
},{
id:1002,
name:"Frank",
age:30
},{
id:1003,
name:"Aaron",
age:26
}];
var transaction=db.transaction('students','readwrite');
var store=transaction.objectStore('students');
//找到对应‘表’ 插入数据
for(var i=0;i<students.length;i++){
store.add(students[i]);
}
};
//查询数据
function getDataByKey(db,dbName,value){
var transaction=db.transaction(dbName,'readwrite');
var store=transaction.objectStore(dbName);
var request=store.get(value);
request.onsuccess=function(e){ var student=e.target.result; console.log(student.name); };
}
//更新数据
function updateDataByKey(db,dbName,value){
var transaction=db.transaction(dbName,'readwrite');
var store=transaction.objectStore(dbName);
var request=store.get(value);
request.onsuccess=function(e){
var student=e.target.result;
student.age=35;
store.put(student);
};
}
</pre>