HTML5本地存储——IndexedDB

在做web开发的时候，有时候需要存储一些缓存数据，避免下次访问的时候重新加载大量数据，如果只是存在session、cookies里面，会很影响速度，并且session和cookies存储的数据都比较简单，不能存储一些结构化的数据，html5提供了一项比较实用的本地存储技术IndexedDB，就像安装在浏览器上的数据库一样，不过使用方式跟普通的数据库有些不一样，完全采用js的方式来实现建立删除数据库以及数据的增删改查。

 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 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);
 };
 }