深入研究IndexedDBAPI及其在实践中的使用方式。您听说过浏览器上的NoSQL数据库吗？IndexedDB是一个大型的NoSQL存储系统。它允许您在用户的浏览器中存储几乎所有内容。除了通常的搜索、获取和放置操作外，IndexedDB还支持事务。您可以在下面找到IndexedDB的示例。在本文中，我们将重点关注以下内容。为什么我们需要IndexedDB？我们如何在我们的应用程序中使用IndexedDB？IndexedDB的特性IndexedDB的局限性IndexedDB是否适合您的应用程序？为什么我们需要IndexedDB？IndexedDB被认为比localStorage更强大！你知道背后的原因吗？让我们找出来。可以存储比localStorage大得多的数据量，而没有像localStorage那样的特殊限制（在2.5MB和10MB之间）。最大限制取决于浏览器和磁盘空间。例如，Chrome和基于Chromium的浏览器最多允许80%的磁盘空间。如果你有100GB，IndexedDB最多可以使用80GB空间，单个源最多可以使用60GB。Firefox允许每个来源最多2GB，而Safari允许每个来源最多1GB。可以存储基于{key:value}对的任何类型的值更灵活地存储不同的数据类型。这不仅意味着字符串，还意味着二进制数据（ArrayBuffer对象、Blob对象等）。它使用对象存储在内部保存数据。提供了其他浏览器存储选项（例如localStorage和sessionStorage）所没有的查找界面。对于不需要持续互联网连接的Web应用程序很有用IndexedDB对于同时在线和离线工作的应用程序很有用，例如，它可用于渐进式Web应用程序(PWA)中的客户端存储。可以存储应用程序状态通过为频繁使用的用户存储应用程序状态，可以大大提高应用程序的性能。稍后，应用程序可以与后端服务器同步并通过延迟加载更新应用程序。我们来看看IndexedDB的结构，它可以存储多个数据库。IndexedDB的结构我们如何在我们的应用程序中使用IndexedDB？在以下部分中，我们将研究如何使用IndexedDB引导应用程序。1、使用“window.indexedDB”打开数据库连接constopeningRequest=indexedDB.open('UserDB',1);其中UserDB是数据库名称，1是数据库的版本。这将返回一个对象，它是IDBOpenDBRequest接口的一个实例。2.创建对象存储打开数据库连接后，会触发onupgradeneeded事件，可用于创建对象存储。//创建UserDetails对象存储和索引request.onupgradeneeded=(event)=>{letdb=event.target.result;//创建UserDetails对象存储//withauto-incrementIDletstore=db.createObjectStore('UserDetails',{autoIncrement:true});//在网卡属性上创建索引letindex=store.createIndex('nic','nic',{unique:true});};3.一旦与数据库的连接打开，将数据插入到对象存储中，您可以在onsuccess事件处理程序中管理数据。插入数据分4步进行。functioninsertUser(db,user){//新建一个东西consttxn=db.transaction('User','readwrite');//获取UserDetails对象storeconststore=txn.objectStore('UserDetails');//插入一个新的recordletquery=store.put(user);//处理成功案例query.onsuccess=function(event){console.log(event);};//处理失败案例query.onerror=function(event){console.log(event.target.errorCode);}//事务完成后关闭数据库用于插入更多记录。request.onsuccess=(event)=>{constdb=event.target.result;insertUser(db,{email:'john.doe@outlook.com',firstName:'John',lastName:'Doe',});insertUser(db,{email:'ann.doe@gmail.com',firstName:'Ann',lastName:'Doe'});};IndexedDB可以执行很多操作，其中一些操作如下：从对象存储中通过索引从对象存储中读取/搜索数据。更新记录。删除记录。从以前版本的数据库迁移等IndexedDB的功能，下面简单介绍一些特性。拥有异步API可以在不阻塞UI线程的情况下执行昂贵的操作，并为用户提供更好的体验。事务支持可靠性如果一个步骤失败，事务将被取消，数据库将回滚到之前的状态。支持版本控制您可以在数据库创建时对其进行版本控制，并在需要时对其进行升级。也可以在IndexedDB中从旧版本迁移到新版本。私域数据库是一个域的私有数据库，其他网站无法访问其他网站的IndexedDB存储。这就是所谓的同源策略。IndexedDB的局限性到目前为止，IndexedDB似乎很有希望用于客户端存储。但是，有一些明显的局限性。即使有现代浏览器支持，IE等浏览器也不完全支持。Firefox在隐私浏览模式下完全禁用IndexedDB-这可能会导致您的应用程序在通过隐身窗口访问时崩溃。IndexedDB适合您的应用程序吗？基于IndexedDB提供的众多功能，这个百万美元问题的答案可能是肯定的！但是，在下结论之前，请问自己以下问题。您的应用程序需要离线访问吗？您是否需要在客户端存储大量数据？您是否需要在大量数据中快速查找/搜索数据？您的应用程序是否使用IndexedDB支持的浏览器来访问客户端存储？您是否需要存储各种类型的数据，包括JavaScript对象？从客户端存储写入/读取是否需要非阻塞？如果您对以上所有问题的回答都是肯定的，那么IndexedDB是您的最佳选择。但是如果你不需要这样的功能，你不妨选择像localStorage这样的存储方式，因为它提供了广泛的浏览器适用性并且有一个易于使用的API。总结当我们考虑所有客户端存储机制时，IndexedDB无疑是赢家。让我们看一下不同客户端存储方式的总结比较。希望您对IndexedDB及其好处有一个清晰的认识。本文转载自微信公众号“前端全栈开发者”，可通过以下二维码关注。转载本文请联系前端全栈开发公众号。
