前端数据库——WebSQL和IndexedDB

时间  2019-11-10
标签 前端 数据库 websql indexeddb 栏目 SQL 繁體版
原文   原文链接

1、WebSQL

WebSQL是前端的一个独立模块，是web存储方式的一种，咱们调试的时候会常常看到，只是通常不多使用。前端

兼容性:当前只有谷歌支持，ie和火狐均不支持。
图片描述web

咱们对数据库的通常概念是后端才会跟数据库打交道，进行一些业务性的增删改查。而这里的数据库也不一样于真正意义上的数据库。sql

主要方法：数据库

  1. openDatabase：这个方法使用现有的数据库或者新建的数据库建立一个数据库对象。
  2. transaction：这个方法让咱们可以控制一个事务，以及基于这种状况执行提交或者回滚。
  3. executeSql：这个方法用于执行实际的 SQL 查询。

  4. openDatabase() 方法对应的五个参数说明：后端

    1. 数据库名称
    2. 版本号
    3. 描述文本
    4. 数据库大小
    5. 建立回调

transaction执行数据库操做，操做内容就是正常的数据库的增删改查。跨域

executeSql是执行具体的sql，参数是1.sql语句（大写？），2.语句中的变量，3.执行后的回调，4.数组

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
  tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]); //使用外部变量，执行时会将变量数组中的值依次替换前边的问号位置

  tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
        var len = results.rows.length, i; msg = "<p>查询记录条数: " + len + "</p>"; document.querySelector('#status').innerHTML += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.querySelector('#status').innerHTML += msg; } 
    }, null); //查询和回调
  tx.executeSql('DELETE FROM LOGS  WHERE id=1'); //删除
  tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
  tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2'); //更新
  tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

基本操做与实际数据库操做基本一致。浏览器

最终的数据去向，我理解为只是作临时存储和大型网站的业务运行存储缓存的做用，页面刷新后该库就不存在了。而其自己与关系数据库的概念比较类似。缓存

2、IndexedDB

诞生背景：服务器

　　随着浏览器的功能不断加强，愈来愈多的网站开始考虑，将大量数据储存在客户端，这样能够减小从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不一样），并且不提供搜索功能，不能创建自定义的索引。因此，须要一种新的解决方案，这就是 IndexedDB 诞生的背景。

　　IndexedDB是浏览器提供的本地数据库， 容许储存大量数据，提供查找接口，还能创建索引。这些都是 LocalStorage 所不具有的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。诞生背景：

　　随着浏览器的功能不断加强，愈来愈多的网站开始考虑，将大量数据储存在客户端，这样能够减小从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不一样），并且不提供搜索功能，不能创建自定义的索引。因此，须要一种新的解决方案，这就是 IndexedDB 诞生的背景。

　　IndexedDB是浏览器提供的本地数据库， 容许储存大量数据，提供查找接口，还能创建索引。这些都是 LocalStorage 所不具有的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

上面介绍的WebSQL也是一种在浏览器里存储数据的技术,跟IndexedDB不一样的是,IndexedDB更像是一个NoSQL数据库,而WebSQL更像是关系型数据库,使用SQL查询数据。

代码判断当前浏览器是否支持indexed db

var db = {
        version: 1, // important: only use whole numbers!
        isSupport: function () {// support indexeddb or not
            if (!window.indexedDB)
                return false;
            return true;
        },
        ......
      }

IndexedDB 具备如下特色：

（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。全部类型的数据均可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每个数据记录都有对应的主键，主键是独一无二的，不能有重复，不然会抛出一个错误。

（2）异步。 IndexedDB 操做时不会锁死浏览器，用户依然能够进行其余操做，这与 LocalStorage 造成对比，后者的操做是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操做步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生以前的状态，不存在只改写一部分数据的状况。

（4）同源限制 IndexedDB 受到同源限制，每个数据库对应建立它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，通常来讲很多于 250MB，甚至没有上限。

（6）支持二进制储存。 IndexedDB 不只能够储存字符串，还能够储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

IndexedDB的一些基本概念：

  1. 数据库：IDBDatabase 对象
  2. 对象仓库：IDBObjectStore 对象
  3. 索引： IDBIndex 对象
  4. 事务： IDBTransaction 对象
  5. 操做请求：IDBRequest 对象
  6. 指针： IDBCursor 对象
  7. 主键集合：IDBKeyRange 对象

（1）数据库。

数据库是一系列相关数据的容器。每一个域名（严格的说，是协议 + 域名 + 端口）均可以新建任意多个数据库。

IndexedDB 数据库有版本的概念。同一个时刻，只能有一个版本的数据库存在。若是要修改数据库结构（新增或删除表、索引或者主键），只能经过升级数据库版本完成。

（2）对象仓库

每一个数据库包含若干个对象仓库（object store）。它相似于关系型数据库的表格。

（3）数据记录

对象仓库保存的是数据记录。每条记录相似于关系型数据库的行，可是只有主键和数据体两部分。主键能够是数据记录里面的一个属性，也能够指定为一个递增的整数编号。

（4）索引

（5）事务

数据记录的读写和删改，都要经过事务完成。事务对象提供error、abort和complete三个事件，用来监听操做结果。

基本操做：

（1）打开数据库

使用 IndexedDB 的第一步是打开数据库，使用indexedDB.open()方法。

var request = window.indexedDB.open(databaseName, version);

这个方法接受两个参数，第一个参数是字符串，表示数据库的名字。若是指定的数据库不存在，就会新建数据库。第二个参数是整数，表示数据库的版本。若是省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为1。

indexedDB.open()方法返回一个 IDBRequest 对象。这个对象经过三种事件error、success、upgradeneeded，处理打开数据库的`操做结果。

（2）新建数据库

eg：

var db;
var objectStore;
var request = window.indexedDB.open(databaseName, version);

request.onerror = function (event) {}
request.onsuccess = function (event) {
    db = request.result//能够拿到数据库对象
}
//若是指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded
request.onupgradeneeded = function (event) {
    db = event.target.result;
    if (!db.objectStoreNames.contains('person')) {//判断是否存在
        objectStore = db.createObjectStore('person', { keyPath: 'id' });
//自动生成主键db.createObjectStore(
//  'person',
//  { autoIncrement: true }
//);
    }
    //新建索引，参数索引名称、索引所在的属性、配置对象
    objectStore.createIndex('email', 'email', { unique: true });
}

（3）新增数据

在以上操做的基础上，须要新建一个事务。新建时必须指定表格名称和操做模式（"只读"或"读写"）。新建事务之后，经过IDBTransaction.objectStore(name)方法，拿到 IDBObjectStore 对象，再经过表格对象的add()方法，向表格写入一条记录。

写入操做是一个异步操做，经过监听链接对象的success事件和error事件，了解是否写入成功。

eg：

function add() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' });

  request.onsuccess = function (event) {
    console.log('数据写入成功');
  };

  request.onerror = function (event) {
    console.log('数据写入失败');
  }
}

add();

（4）读取数据

objectStore.get()方法用于读取数据，参数是主键的值。

eg：

function read() {
   var transaction = db.transaction(['person']);
   var objectStore = transaction.objectStore('person');
   var request = objectStore.get(1);

   request.onerror = function(event) {
     console.log('事务失败');
   };

   request.onsuccess = function( event) {
      if (request.result) {
        console.log('Name: ' + request.result.name);
        console.log('Age: ' + request.result.age);
        console.log('Email: ' + request.result.email);
      } else {
        console.log('未得到数据记录');
      }
   };
}

read();

（5）遍历数据

遍历数据表格的全部记录，要使用指针对象 IDBCursor。openCursor()方法是一个异步操做，因此要监听success事件。

function readAll() {
  var objectStore = db.transaction('person').objectStore('person');

   objectStore.openCursor().onsuccess = function (event) {
     var cursor = event.target.result;

     if (cursor) {
       console.log('Id: ' + cursor.key);
       console.log('Name: ' + cursor.value.name);
       console.log('Age: ' + cursor.value.age);
       console.log('Email: ' + cursor.value.email);
       cursor.continue();
    } else {
      console.log('没有更多数据了！');
    }
  };
}

readAll();

（6）数据更新

IDBObject.put()方法。

function update() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });

  request.onsuccess = function (event) {
    console.log('数据更新成功');
  };

  request.onerror = function (event) {
    console.log('数据更新失败');
  }
}

update();

（7）数据删除

IDBObjectStore.delete()方法用于删除记录。

function remove() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .delete(1);

  request.onsuccess = function (event) {
    console.log('数据删除成功');
  };
}

remove();

（8）索引的使用

添加索引后可使用索引查询数据

var transaction = db.transaction(['person'], 'readonly');
var store = transaction.objectStore('person');
var index = store.index('name');
var request = index.get('李四');

request.onsuccess = function (e) {
  var result = e.target.result;
  if (result) {
    // ...
  } else {
    // ...
  }
}

3、IndexedDB vs Web SQL

WebSQL也是一种在浏览器里存储数据的技术，跟IndexedDB不一样的是，IndexedDB更像是一个NoSQL数据库，而WebSQL更像是关系型数据库，使用SQL查询数据。W3C已经再也不支持webSql这种技术。由于再也不支持上面也大体分析了其用法，也就再也不赘诉。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程