前端开发工具DevTools的详细知识点总结（二）之前端数据库

devtools里的前端数据库

在devtools里提供两个可供使用的小型数据库：WebSQL 和 IndexedDB。
打开devtools并跳转到Appliciation面板，在Storage模块下便有Web SQL和IndexedDB两个数据库。

WebSQL

WebSQL是前端的一个独立模块，是web存储方式的一种，目前只有谷歌支持，ie和火狐均不支持。
打开一个有数据的表：
WebSQ类似MySQL数据库，也支持命令行sql命令，查询UESRDETAIL表：

这里我只演示一个全查操作，至于更多的CRUDSQL操作，大家可以自行尝试。
对于清除数据库数据，devtools里有一个更为简便的操作：
点击Application里的Clear storage模块，勾选WebSQL然后点击Clear site data即可。

IndexDB

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

这是由于IndexedDB不支持SQL查询，所以IndexedDB数据库不支持直接从面板操作数据库数据。但是，由于devtools可以访问页面上下文，因此可以在devtools中运行JavaScript代码来编辑IndexedDB数据。
对于直接在面板进行删除数据以及删除数据库操作有以下多种方式：

这里可以直接删除此数据库。

第一行的删除标志可以删除整个数据库的数据。
点击某一行数据右键可以删除此行