前端的数据库,入门前端

前端的数据库: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就是一个数据库
其最大的表征是:
选取对象保存数据,而不是利用表来保存数据,同时,它是异步的

从四月份上马,开头在慕课网学习了HTML、css基础课程,但是看了就忘,有些没去掌握,还好有堂哥给自家视频看,生动形象同时又深远了点,可是有些课程听了直犯困,作为零基础,现在还在电力工程设计公司见习的本人,确实过多不懂的,不过,再困再累也得过一遍,hahahha~下边开头记录自己遭受的标题呢,给协调上学进度的记录,也期望自己能锲而不舍下去,热爱那些行当,对那行依旧很感兴趣的,所以,加油咯。

IndexedDB是HTML5业内里新出现的浏览器里停放的数据库。对于在浏览器里积存数据,你可以使用cookies或local
storage,但它们都是相比不难的技能,而IndexedDB提供了近乎数据库风格的数额存储和利用格局。存储在IndexedDB里的多少是世代保存,不像cookies那样只是临时的。IndexedDB里提供了查询数据的意义,在online和offline情势下都能选择。你可以用IndexedDB存储大型数据。

规划规范

IndexedDB的架构很像在有的盛行的劳务器端NOSQL数据库完结中的设计规范类型。面向对象数据经过object
stores(对象仓库)进行持久化,所有操作基于请求同时在作业限制内推行。事件生命周期使你可以支配数据库的布局,错误通过荒谬冒泡来使用API管理。

动用办法

1.inline-block的缝缝怎么解决。

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:为开辟数据库的本子号

2.BFC的定义是什么样

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事件

3.怎么形成BFC

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});
}

4.如何时候用转变哪一天用inline-block

IndexedDB vs Cookies

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

相关文章