网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > html

客户端大数据量存储IndexedDB数据库详解

2022/2/4 14:46:09

我们都知道如果浏览器客户端html页面要存储MB级以上的数据会使用localStorage或sessionStorage,它们的储存量都在10MB以内,虽然远远大于cookie的4KB储存空间,但是依然不适合作为客户端大量储存数据的方式。因此,适用于客户端储存大容量数据的浏览器数据库IndexedDB应运…

  我们都知道如果浏览器客户端html页面要存储MB级以上的数据会使用localStorage或sessionStorage,它们的储存量都在10MB以内,虽然远远大于cookie的4KB储存空间,但是依然不适合作为客户端大量储存数据的方式。因此,适用于客户端储存大容量数据的浏览器数据库IndexedDB应运而生。简单地说,IndexedDB作为一种本地数据库,具有以下几个特点:

  一、异步操作。与前面提到的两种数据储存方式不同,IndexedDB支持数据读写时的异步操作,而不是同步语句。localStorage和sessionStorage主要应用于少量数据的读取,因此进行同步操作对用户的延迟感受不那么明显,但是IndexedDB通常涉及大量数据的读写操作,而同步的设计会拖慢网页,锁死浏览器,造成卡顿,而异步设计使得用户可以进行其他操作,使用体验更好。

  二、储存空间大。IndexedDB可储存数百MB以上的数据量(250MB以上)。

  三、键值对储存。同前述两种储存方式一样,IndexedDB也是采用键值对的储存方式,主键具有唯一性,同样使用JSON格式储存数据,且除字符串外还可以储存二进制数据。

  四、同源限制。正如大多数的 web 储存解决方案一样,IndexedDB 也遵守同源策略。因此当你在某个域名下操作储存数据的时候,你不能操作其他域名下的数据。

  (1)IndexedDB的使用

  通过IndexedDB.open()打开或创建一个新的数据库,并指定一个版本(新建版本默认为1),该方法返回的对象对应三种操作结果:

const request = window.indexedDB.open('transcript', 1)
request.onerror = function (event) {
  console.log('数据库打开报错');
};
var db;
request.onsuccess = function (event) {
  db = request.result;
  console.log('数据库打开成功');
};
request.onupgradeneeded = function (event) {
  db = event.target.result;
  console.log('指定的版本号,大于数据库的实际版本号,数据库升级');
}
  

  如果打开时指定数据库不存在就会新建,新建后触发upgradeneeded事件,并在onupgradeneeded监听事件中完成后续操作。

request.onupgradeneeded = function(event) {
  db = event.target.result;
  // 新建一张名为person,主键为id的表格
  var objectStore;
  if (!db.objectStoreNames.contains('person')) {
    // 如果不存在则新建
    objectStore = db.createObjectStore('person', { keyPath: 'id' });
  }
}    
  

  主键相当于属性,主键是数据库表中的唯一性索引且只能有一个主键,新建表后可以新建索引,索引可以帮助查找数据。

objectStore.createIndex('name', 'name', { unique: true })
objectStore.createIndex('grade', 'grade', { unique: true })

  IDBObject.createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象(说明该属性是否包含重复的值)。

  IndexedDB有一个事务对象,在事务中可以为对象仓库添加数据和读取数据。新建事务后通过事务的objectStore(name)方法,获取对象仓库,对象仓库通过add()方法向其中写入数据记录。

function recordGrades() {
  var request = db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .add({ id: 1, name: '张三', grade: 100});
  request.onsuccess = function (event) {
    console.log('成绩录入成功');
  };
  request.onerror = function (event) {
    console.log('成绩录入失败');
  }
}
recordGrades();
   

  写入数据是一个异步的过程,它有success和error两个返回状态,可以在这两个状态中设计相应的回调函数。读取数据时也是通过事务transaction对象,只需要传入表格的名称,然后通过get()方法读取数据。此外,通过delete()方法可以删除数据记录,当用createIndex()创建了索引时,可以用对象仓库的index()属性获取索引名称,从索引名称中检索获取指定的数据记录。

var transaction = db.trancaction(['person'])
// 通过事务transaction对象
var personStore = transaction.objectStore('person')
var getData = personStore.get(1)
getData .onsuccess = function(event) {
  console.log('Grade for' + getData.result.name + "is" + getData .result.grade)
}
const grades = [
  {id: 2, name: '李四', grade: 96},
  {id: 3, name: '王五', grade: 97}
]
const request = window.indexedDB.open('transcript', 2)
request.onupgradeneeded = function (event) {
    db = event.target.result
     // 新建一张名为person,主键为id的表格
    var objectStore
    if (!db.objectStoreNames.contains('person')) {
        // 如果不存在则新建
        objectStore = db.createObjectStore('person', { keyPath: 'id'         })
    objectStore.createIndex('name', 'name', { unique: false })
    objectStore.createIndex('grade', 'grade', { unique: true })
    objectStore.transaction.oncomplete = function (event) {
    var request1 = db.transaction(['person'],   'readwrite').objectStore('person').add({ id: 1, name: '张三', grade: 100 })
    var transcriptName = db.transaction(['person'], 'readwrite').objectStore('person')
    // add()添加数据
    grades.forEach((item) => {
        transcriptName.add(item)
    }
    // delete()删除数据
    var delRequest = db.transaction(["person"], "readwrite").objectStore("person").delete("1")
    delRequest.onsuccess = function(event) {       
        console.log("数据已删除")     
    }
    // openCursor()遍历数据
    var cursorStore = db.transaction('person').objectStore('person')
    cursorStore.openCursor().onsuccess = function (event) {
        var cursor = event.target.result;
        if (cursor) {
            console.log('Id: ' + cursor.key)
            console.log('Name: ' + cursor.value.name)
            console.log('Grade: ' + cursor.value.grade)
            cursor.continue();
      } else {
        console.log('没有更多数据了!')
      }
  }
        // put()更新数据
        var putRequest = db.transaction(['person'], 'readwrite').objectStore('person').put({ id: 1, name: '张大三', grade: 99 });
        putRequest.onsuccess = function (event) {
            console.log('数据更新成功')
        }
        putRequest.onerror = function (event) {
            console.log('数据更新失败')
        }
   // index()获取索引
        var index = objectStore.index("name")
        index.get("张三").onsuccess = function(event) {
            console.log("张三的成绩是 " + event.target.result.grade);
        }
    }
}

  (2)常用接口

    • IndexedDB的一些常用接口为触发事件操作数据的存储和修改提供便利。

    • IDBDataBase 表示一个数据库连接。这是在数据库中获取事务的唯一方式。

    • IDBObjectStore 表示允许访问通过主键查找的 IndexedDB 数据库中的一组数据的对象存储区。

    • IDBIndex  使用索引来检索 IndexedDB 数据库中的数据子集。

    • IDBTransaction 在数据库上创建一个事务,指定作用域(例如要访问的存储对象),并确定所需的访问类型(只读或读写)。

    • IDBRequest 处理数据库请求并提供对结果访问的通用接口。

    • IDBCursor  用于遍历objectStore对象的数据。

    • IDBKeyRange 定义可用于从特定范围内的数据库检索数据的键范围。

        通过以上内容我们知道了html页面客户端大数据量存储IndexedDB数据库详解,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • document.forms[0]是什么意思?怎么用?

    document.forms我们都知道是用来表示获取当前页面的所有表单,那么document.forms[0]是什么意思呢?document.forms[0] 用来获得当前网页多个表单中的第一个表单。我们可以通过下面的例子看看如何使用它。<!DOCTYPE html><html xmlns="http://www.w3.org/19…

    2021/6/5 16:43:47
  • urldecode解码除了+号还有其它符号吗?

    urlencode函数对字符串进行URL解码。例如通过urlencode编码后的字符串,可通过UrlDecode进行解码。对Url路径加码的函数是UrlEncode 用法相反,和UrlDecode是一致对应的 那么urldecode解码除了+号还有什么特殊符号呢? urldecode解码除了+号还有一些其他特殊字符…

    2021/5/16 16:35:57
  • 实例告诉你如何正确使用table的thead、tbody、tfoot?

    table的thead、tbody、tfoot作用为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成。下载一块显示一块,表格…

    2021/3/24 21:46:13
  • 如何不让IIS缓存png图片、js脚本、html网页等静态文件

    https://blog.csdn.net/chelen_jak/article/details/19234861禁止IIS缓存静态文件(png、js、html等)背景:IIS为了提高性能,默认情况下会对静态文件js、html、gif、png等做内部缓存,这个缓存是在服务器iis进程的内存中的。IIS这么做在很大程度上可以提高静态文件的访问…

    2021/3/21 16:34:03
  • HTML中meta元素标签的三种常见用法

    HTML meta 元素meta标签描述了一些基本的元数据。标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关…

    2021/2/28 21:05:35