前端存储 (4) - IndexDB

clasnake 发布于2019-08-22 18:45 / 2795人阅读

摘要：允许您存储和检索用键索引的对象可以存储支持的任何对象。是非关系型数据库和的差别是关系型数据库，前端需要写，目前已经浏览器基本已经放弃基本使用打开数据库并且开始一个事务。通过监听正确类型的事件以等待操作完成。

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

demo地址

简介

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 通信

存储二进制文件

文章来自胡城的个人网站

云服务器 GPU云服务器 indexDB js前端存储方式框架net数据存储前端 android 4 4 短信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96157.html

IndexedDB 打造靠谱 Web 离线数据库

摘要：设置为参数设置指定索引，并确保唯一性上面主要做了件事打开数据库表新建，并设置设置打开数据库表主要就是版本号和名字，没有太多讲的，我们直接从创建开始吧。打开注意事项检查是否支持版本更新在生成一个实例时，需要手动指定一个版本号。在知乎和我在平常工作中，常常会看到一个问题：前端现在还火吗？这个我只想说：隔岸观火的人永远无法明白起火的原因，只有置身风暴，才能找到风眼之所在 ——『秦时明...

孙吉亮 2019-08-22 17:25 评论0 收藏0
浏览器缓存原理以及本地存储

摘要：私有缓存就是用户专享的，各级代理不能缓存的缓存。代表使用内存中的缓存，则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为。作为一名前端工作人员，前端的缓存知识是必须掌握的，因为一个网站打开网页的速度直接关系到用户体验，用户粘度，而提高网页的打开速度有很多方面需要优化，其中比较重要的一点就是利用好缓存，缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 1 缓存缓存从宏观上分为私有...

roundstones 2019-08-23 13:47 评论0 收藏0
浏览器缓存原理以及本地存储

摘要：私有缓存就是用户专享的，各级代理不能缓存的缓存。代表使用内存中的缓存，则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为。作为一名前端工作人员，前端的缓存知识是必须掌握的，因为一个网站打开网页的速度直接关系到用户体验，用户粘度，而提高网页的打开速度有很多方面需要优化，其中比较重要的一点就是利用好缓存，缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 1 缓存缓存从宏观上分为私有...

Rindia 2019-08-02 12:07 评论0 收藏0
浏览器缓存原理以及本地存储

摘要：私有缓存就是用户专享的，各级代理不能缓存的缓存。代表使用内存中的缓存，则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为。作为一名前端工作人员，前端的缓存知识是必须掌握的，因为一个网站打开网页的速度直接关系到用户体验，用户粘度，而提高网页的打开速度有很多方面需要优化，其中比较重要的一点就是利用好缓存，缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 1 缓存缓存从宏观上分为私有...

inapt 2019-08-29 17:25 评论0 收藏0