零基础学习浏览器数据库IndexedDB

 

了解IndexedDB

IndexedDB桌面端50M上限，移动端5M上限，适合大量数据存储

 

IndexedDB是什么？

首先，它是一个数据库，是一个非关系型数据库

它不需要使用sql语句进行操作，它的数据形式是json

 

产生背景：

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以当需要存储大量数据时，就需要使用IndexedDB进行数据存储与查询

 

IndexedDB特点：

1、容量大、nosql、同域共享

2、api复杂，版本概念难理解

3、可建立索引

IndexedDB应用

使用window.indexedDB执行指令

创建打开一个数据库

代码执行

//open是打开一个数据库，如果没有会默认创建一个
//建立数据库db:open是打开数据库的意思，如果没有，它会创建一个数据库
var request=window.indexedDB.open('db',1)
var db;

//onsuccess是每次打开数据库都会触发的一个事件
request.onsuccess=function(event){
    db=request.result;
    console.log('数据库打开成功');
};

//onupgradeneeded只在创建数据库的时候触发（第一次打开），
//是唯一可以声明表结构的地方因为createObjectStore只能
//在onupgradeneeded的回调函数中触发

request.onupgradeneeded = function (event){
    db=event.target.result

//建立数据表person
    if(!db.objectStoreNames.contains('person')){

//定义表的name为person，key为id---效果如下
    objectStore=db.createObjectStore('person',{keyPath:'id'});
}
console.log('person created')
}

效果：

 

 

 

数据的保存添加---add

添加数据，具有读写权限

代码：

db.transaction(['person'],'readwrite')

    .objectStore('person')

    .add({id:1,name:'liu',age:23})

效果：

 

数据的修改---put

将peison表中的name修改为“liuxiaowei”,age改为“18”

代码：

db.transaction(['person'],'readwrite')

    .objectStore('person')

    .put({id:1,name:'liuxiaowei',age:18})

效果：

 

 

数据的查询---get

代码：

var request=db.transaction(['person'],'readwrite')

    .objectStore('person')

    .get(1)

request.onsuccess=function(e){

    console.log(request.result)

}

效果：

 

数据的删除---delete

删除id为1的数据

代码：

var request=db.transaction(['person'],'readwrite')

    .objectStore('person')

    .delete(1)

 

效果：