php indexdb,前端存储 (4) - IndexDB

IndexDB的出现 是为了存储更大量的结构化数据

简介

IndexedDB是一个事务型数据库系统,类似于基于SQL的RDBMS。 然而不同的是它使用固定列表(只有 key,value),IndexedDB是一个基于JavaScript的面向对象的数据库。

IndexedDB允许您存储和检索用键索引的对象; 可以存储structured clone algorithm支持的任何对象。

您只需要指定数据库模式,打开与数据库的连接,然后检索和更新一系列事务中的数据。

IndexedDB 是非关系型数据库

IndexDB 和 WebSql的差别

WebSql 是关系型数据库, 前端需要写sql ,目前 WebSql已经浏览器基本已经放弃

基本使用

1.打开数据库并且开始一个事务。

2.创建一个 object store。

3.构建一个请求来执行一些数据库操作,像增加或提取数据等。

4.通过监听正确类型的 DOM 事件以等待操作完成。

5.在操作结果上进行一些操作(可以在 request 对象中找到)

var dbName = "the_name";

var db ;

// 连接数据库,没有就创建数据库

var request = indexedDB.open(dbName, 2);

request.onsuccess = function(event){

db = request.result;

}

// 错误处理程序在这里。

request.onerror = function(event) {

console.log(event);

};

request.onupgradeneeded = function(event) {

db = event.target.result;

// 创建一个对象存储空间来, 自增主键

var objectStore = db.createObjectStore("customers");

};

// 添加数据

var customerData = [

{ id:"1", name: "Bill", age: 35, email: "bill@company.com" },

{ id:"2", name: "Donna", age: 32, email: "donna@home.org" }

];

var transaction = db.transaction(dbName, "readwrite");

// 打开存储对象

var objectStore = transaction.objectStore('customers');

// 添加到数据对象中

customerData.forEach(function(item){

objectStore.put(item,item.id);

});

// 查询

db.transaction("customers").objectStore("customers").get("1").onsuccess = function(event) {

console.log(event.target.result.name);

};

存储大小 50MB 左右

应用场景

跨 Tab 通信

存储二进制 文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值