前端的存储: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难记。

发布了284 篇原创文章 · 获赞 37 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览