来自 澳门威尼斯人平台 2019-12-29 05:22 的文章
当前位置: 澳门威尼斯人平台 > 澳门威尼斯人平台 > 正文

IndexedDB:浏览器里内置的数据库(转)

前端的数据库:IndexedDB入门

2014/12/27 · 未分类 · IndexedDB

本文由 伯乐在线 - cucr 翻译,黄利民 校稿。未经许可,禁止转载!
英文出处:www.codemag.com。欢迎加入翻译组。

应用程序需要数据。对大多数Web应用程序来说,数据在服务器端组织和管理,客户端通过网络请求获取。随着浏览器变得越来越有能力,因此可选择在浏览器存储和操纵应用程序数据。

本文向你介绍名为IndexedDB的浏览器端文档数据库。使用lndexedDB,你可以通过惯于在服务器端数据库几乎相同的方式创建、读取、更新和删除大量的记录。请使用本文中可工作的代码版本去体验,完整的源代码可以通过GitHub库找到。

读到本教程的结尾时,你将熟悉IndexedDB的基本概念以及如何实现一个使用IndexedDB执行完整的CRUD操作的模块化JavaScript应用程序。让我们稍微亲近IndexedDB并开始吧。

什么是IndexedDB

一般来说,有两种不同类型的数据库:关系型和文档型(也称为NoSQL或对象)。关系数据库如SQL Server,MySQL,Oracle的数据存储在表中。文档数据库如MongoDB,CouchDB,Redis将数据集作为个体对象存储。IndexedDB是一个文档数据库,它在完全内置于浏览器中的一个沙盒环境中(强制依照(浏览器)同源策略)。图1显示了IndexedDB的数据,展示了数据库的结构

澳门威尼斯人平台 1

图1:开发者工具查看一个object store

全部的IndexedDB API请参考完整文档

介绍

IndexedDB就是一个数据库
澳门威尼斯人平台,其最大的特点是: 使用对象保存数据,而不是使用表来保存数据,同时,它是异步的

IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据,你可以使用cookies或local storage,但它们都是比较简单的技术,而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存,不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能,在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。

数据库设计入门,数据库入门

数据库是网络应用的基础,良好的表结构设计,对整个应用起着至关重要的作用。

数据库设计的步骤:
1.需求分析:数据是什么,有哪些属性,数据和属性的特点
2.逻辑设计:使用ER图对数据库进行逻辑建模
3.物理设计:选择数据库系统,并对逻辑设计进行转化
4.维护优化:追加,分拆等

 

实例演示(电子商务网站)

一、需求分析:

用户模块:用于登录和保存用户信息等
属性(用户名、密码、手机、邮箱、身份证、地址、姓名。。。) 唯一标识(用户名、身份证、手机) 存储特点(永久)

商品模块:用于记录网站中销售的商品信息
属性(编码、名称、描述、分类、供应商、价格。。。)  唯一标识(编码、名称+供应商)  存储特点(不在销售商品可归档)

订单模块:用于用户订购商品的信息
属性(订单号、收件人、电话、地址、商品名称与数量、订单状态、支付状态)  唯一标识(订单号) 存储特点(分表分库)

购物车模块:用于保存用户购物时选的商品
属性(编号、用户名、商品编号名称数量价格、加入时间)  唯一标识(购物车编号) 存储特点(不用永久,可定时归档与清理)

供应商模块:用于保存所销售商品的供应商信息
属性(编号、名称、联系人、营业执照号)  唯一标识(编号、营业执照号)  存储特点(永久)

澳门威尼斯人平台 2

 

二、逻辑设计:

ER图:矩形(实体);菱形(联系集);椭圆(属性【下划线为主键】);线段(连接)
联系集主要用来将多对多关系转换为一对多(即建立一张关系表)

澳门威尼斯人平台 3

数据库设计范式:

第一范式:每一列属性都是不可分割的原子数据项(即每个属性不能再分)。
案例:将地址分为省份、城市、区县、详细(街道门牌),四个不可分割部分。

第二范式:要求实体的属性完全依赖于主关键字(即为每个实体建立唯一主键来区分)。
案例:学生信息表中,学号+课程→成绩,成绩无法完全依赖于主键学号。

第三范式:在2NF基础上,任何非主属性不依赖于其它非主属性(在2NF基础上消除传递依赖,减少数据冗余)
案例:员工信息表中,添加部门编号后,不可再添加部门名称简介等依赖部门编号的属性。

BC范式:在3NF基础上,任何非主属性不能对主键子集依赖(在3NF基础上消除对主码子集的依赖)

 

三、物理设计

1、选择合适的数据库系统

2、定义数据库、表及字段的命名规范

3、根据数据库系统设置字段类型(优先数字类型,其次日期和二进制,最后字符串)

4、反范式化设计(方便查询,提高效率)

列类型   存储空间
 TINYINT   1字节 
SMALLINT   2字节 
MEDIUMINT    3字节
INT    4字节
BINGINT    8字节
DATE    3字节
DARETIME    8字节
TIMESTAMP    4字节
CHAR(M)    M字节,1<=M<=255
VARCHAR(M)   L+1字节,L<M&&1<=M<=255

 

 

 

 

 

 

 

 

 

 

 

 

 

四、维护优化

1、维护数据字典

2、维护索引

3、维护的表结构

4、表的拆分(垂直、水平)

垂直拆分原则:将常用的字段与不常用的字段依据id主键拆分为两个或多个表,减少表的宽度

水平拆分原则:将历史或过期数据水平拆分成多个表,减少表的长度

数据库是网络应用的基础,良好的表结构设计,对整个应用起着至关重要的作用。 数据库设计的步骤: 1.需...

设计典范

IndexedDB的架构很像在一些流行的服务器端NOSQL数据库实现中的设计典范类型。面向对象数据通过object stores(对象仓库)进行持久化,所有操作基于请求同时在事务范围内执行。事件生命周期使你能够控制数据库的配置,错误通过错误冒泡来使用API管理。

使用方式

IndexedDB里数据以对象的形式存储,每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里,objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore,objectStore里可以有很多对象。每个对象可以用key值获取。

对象仓库

object store是IndexedDB数据库的基础。如果你使用过关系数据库,通常可以将object store等价于一个数据库表。Object stores包括一个或多个索引,在store中按照一对键/值操作,这提供一种快速定位数据的方法。

当你配置一个object store,你必须为store选择一个键。键在store中可以以“in-line”或“out-of-line”的方式存在。in-line键通过在数据对象上引用path来保障它在object store的唯一性。为了说明这一点,想想一个包括电子邮件地址属性Person对象。您可以配置你的store使用in-line键emailAddress,它能保证store(持久化对象中的数据)的唯一性。另外,out-of-line键通过独立于数据的值识别唯一性。在这种情况下,你可以把out-of-line键比作一个整数值,它(整数值)在关系数据库中充当记录的主键。

图1显示了任务数据保存在任务的object store,它使用in-line键。在这个案例中,键对应于对象的ID值。

连接数据库

要使用它必须先打开,通过 indexDB.open(name, version)方法打开一个数据库

  • name : 表示数据要打开的数据库的名称
  • version:为打开数据库的版本号

IndexedDB vs LocalStorage

IndexedDB和LocalStorage都是用来在浏览器里存储数据,但它们使用不同的技术,有不同的用途,你需要根据自己的情况适当的选择使用哪种。LocalStorage是用key-value键值模式存储数据,但跟IndexedDB不一样的是,它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让LocalStorage存储对象,你需要借助JSON.stringify()能将对象变成字符串形式,再用JSON.parse()将字符串还原成对象。但如果要存储大量的复杂的数据,这并不是一种很好的方案。毕竟,localstorage就是专门为小数量数据设计的,它的api是同步的。

IndexedDB很适合存储大量数据,它的API是异步调用的。IndexedDB使用索引存储数据,各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。IndexedDB比localstorage强大得多,但它的API也相对复杂。

对于简单的数据,你应该继续使用localstorage,但当你希望存储大量数据时,IndexedDB会明显的更适合,IndexedDB能提供你更为复杂的查询数据的方式。

基于事务

不同于一些传统的关系数据库的实现,每一个对数据库操作是在一个事务的上下文中执行的。事务范围一次影响一个或多个object stores,你通过传入一个object store名字的数组到创建事务范围的函数来定义。

创建事务的第二个参数是事务模式。当请求一个事务时,必须决定是按照只读还是读写模式请求访问。事务是资源密集型的,所以如果你不需要更改data store中的数据,你只需要以只读模式对object stores集合进行请求访问。

清单2演示了如何使用适当的模式创建一个事务,并在这片文章的 Implementing Database-Specific Code 部分进行了详细讨论。

indexDB.open()方法的原理

分为两种情况:
1. 传入的数据库不存在
当传入的数据库不存在时,该方法就会创建一个名为name的数据库,并打开它,此时,会先触发upgradeneeded事件;调用该函数会返回一个IDBRequest对象,可以在该对象上添加onsuccess事件onerror事件
注意:当打开一个不存在的数据库时会触发upgradeneeded事件,这是触发该事件的一种途径,为什么会触发该事件呢?该事件有什么作用?留个疑问在这儿,等会解答。

2. 传入的数据库存在
这里分为两种情况:

  • 当传入的数据库存在,且version版本号与将要打开的数据库版本号也相同
    则直接打开该数据库,如果成功,则会触发onsuccess事件,失败则触发onerror事件
    注意:这里并不会触发upgradeneeded事件,为什么?留个疑问

  • 当传入的数据库存在,但是传入的version版本号高于将要打开的数据库的版本号
    则直接打开该数据库,同时触发upgradeneeded事件,然后再触发onsuccess事件onerror事件,这里也触发了onupdateneeded事件

IndexedDB vs Web SQL

WebSQL也是一种在浏览器里存储数据的技术,跟IndexedDB不同的是,IndexedDB更像是一个NoSQL数据库,而WebSQL更像是关系型数据库,使用SQL查询数据。W3C已经不再支持这种技术。具体情况请看:。

因为不再支持,所以你就不要在项目中使用这种技术了。

基于请求

直到这里,有一个反复出现的主题,您可能已经注意到。对数据库的每次操作,描述为通过一个请求打开数据库,访问一个object store,再继续。IndexedDB API天生是基于请求的,这也是API异步本性指示。对于你在数据库执行的每次操作,你必须首先为这个操作创建一个请求。当请求完成,你可以响应由请求结果产生的事件和错误。

本文实现的代码,演示了如何使用请求打开数据库,创建一个事务,读取object store的内容,写入object store,清空object store。

upgradeneeded事件

触发该事件的条件:当打开的数据库不存在,或者传入的数据库版本version高于当前版本,则会触发该事件

upgradeneeded事件的作用:当打开了一个数据库之后,需要开辟一个名为:对象存储空间 的玩意(可以理解为数据就是存放在这个空间里面,一个数据库可以创建多个对象存储空间),而 对象存储空间 只能在upgradeneeded事件的处理函数中创建

使用时,注意以下两种情况:

  1. 当我们第一次打开创建数据库时,会触发upgradeneeded事件,我们就需要在其中创建对象存储空间

  2. 当我们对数据库版本进行更新时,也会触发该事件,这时可以在此创建新的对象存储空间,原来的对象存储空间仍然存在

注意:如果需要对对象存储空间进行修改,那么只能先将存储在它里面的数据读取出来,再将其删除,然后使用新的选项去创建它,再写入原来的数据

打开数据库并创建对象存储空间的代码:

// 对于该API,各浏览器还未同一,所以需要对一些接口添加前缀
window.indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"};
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBTransaction;

// 判断浏览器是否支持IndexedDB
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

var request , db;
// 打开或创建 名为dbName的数据库
request = window.indexedDB.open('dbName', 2)
request.onsuccess = function (event) {
   db = event.target.result;
}

request.onerror = function (event) {
   console.log('错误代码: ' + event.target.errorCode);
}

request.onupgradeneeded = function(event) {
  db = event.target.result;  // 
  // 创建一个   对象存储空间,名为customers
  var objectStore = db.createObjectStore('customers', {keyPath: 'ssn'});
  // 对于某些数据,可以为一个对象存储空间指定多个键。比如,若要通过用户ID 和用户名 两种方式来保存用户资料,就需要通过两个键来存取记录
  // 因此可以使用createIndex,名字是有可能重复的,所以其unique 设置为 false ;第一个name是索引的名字,该名字是索引的名字,第二个name是索引的属性的名字,该名字要与对象中的属性相同
  objectStore.createIndex('name', 'name', { unique: false});

  // 创建一个email的索引,该email是独特的,所以 unique 设置为 true
  objectStore.createIndex('email', 'email', { unique: true});
}

IndexedDB vs Cookies

Cookies(小甜点)听起来很好吃,但实际上并不是。每次HTTP接受和发送都会传递Cookies数据,它会占用额外的流量。例如,如果你有一个10KB的Cookies数据,发送10次请求,那么,总计就会有100KB的数据在网络上传输。Cookies只能是字符串。浏览器里存储Cookies的空间有限,很多用户禁止浏览器使用Cookies。所以,Cookies只能用来存储小量的非关键的数据。

本文由澳门威尼斯人平台发布于澳门威尼斯人平台,转载请注明出处:IndexedDB:浏览器里内置的数据库(转)

关键词: