前端的存储：websql和indexedDB

关于存储，我们大多都知道存储的老伙计localStorage和sessionStorage、cookie等

今天就继续了解下websql和indexedDB的使用(js的红宝书上有详细介绍)

---

WebSQL:(不再维护，当扩展看看就好)

其弥补前端的关系型存储。底层实现是通过sqlite这个轻量级的数据库。

只有极少数的浏览器支持(chrome等)【其他浏览器不去实现是因为webSQL这个标准不再维护了。】

1.创建数据库：

参数说明：数据库的名字、版本、备注、存储容量的限制(chrome中无论填多少都是5M)

2.创建表：

3.向表中插入数据

改就是update语句，删就是delete语句

4.读取数据

webSQL:

1.标准不再更新，关系型、底层sqlite

2. chrome中容量5M，支持同域名不同页面共享

3.版本参数用于控制，如果打开版本与现有版本不一致，则报错。

---

IndexedDB:

IndexedDB也算是一种Nosql,跟localstorage十分相似.

Localstorage的存储上限是5M，IndexedDB算是重量级的，存储上限远远大于5M.

创建数据库：

var resuest = window.indexedDB.open('db',1);

var db ;

request.onsuccess= function(event){

     db = request.result;

    console.log('数据库打开成功');

}

request.onupgradeneeded = function(event){

     db = event.target.result;

    var objectStore;

    if(!db.objectStoreNames.contains('person')){

      objectStore = db.createObjectStore('person',{ keyPath: 'id'});

    }

   console.log('person created')

}

onupgradeneeded只在创建的时候触发，是唯一能声明表结构的地方.

createObjectStore方法只能在onupgradeneeded这个回调中使用。

objectStore可以理解为表。

我这里出了点问题，正常的话应该是可以看见有个person的.

插入数据:

db.transaction(['person'],'readwrite')
   .objectStore('person')
   .add({id:1,name:'yinlei',age:21})

具体效果就不截图了。

修改数据：

db.transaction(['person'],'readwrite')
   .objectStore('person')
   .put({id:1,name:'yinleilei',age:22})

删除数据：

db.transaction(['person'],'readwrite')
   .objectStore('person')
   .delete(1)

delete()中传入key就行了。

查询数据：

db.transaction(['person'],'readwrite')
   .objectStore('person')
   .get(1)

get后不能立即返回，因为他是一个回调的方式，所以需要接收:

var request2 = db.transaction(['person'],'readwrite')
   .objectStore('person')
   .get(1);

并注册其onsuccess方法：

request2.onsuccess = function(e){
    console.log(request2.result);
}

回车后就可以看到结果了。

indexDB:

1. 容量大，nosql,同域共享
2. api复杂，版本概念难理解
3. 可建立索引

---

IndexDB的封装品：

原生api难记。