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數據。
對於直接在面板進行刪除數據以及刪除數據庫操作有以下多種方式：
這裏可以直接刪除此數據庫。
第一行的刪除標誌可以刪除整個數據庫的數據。
點擊某一行數據右鍵可以刪除此行數據。
包括Clear storage，此操作可以刪除IndexedDB下的所有數據庫。
在這幾個面板中還有一些其它的簡單功能按鈕，在之前的面板基本都介紹過，這裏我就不重複囉嗦了，接下來看看如何用js代碼操控着兩類數據庫。
js代碼操作前端數據庫
用js代碼操作WebSQL數據庫和IndexedDB數據庫無非就是創建表以及一些基本的CRUD操作，這裏我只介紹創建表以及插入數據的操作，其它操作換湯不換藥而已。
WebSQL
核心方法
用js代碼操控WebSQL數據庫主要就是使用以下三個核心API：
- openDatabase：這個方法使用現有的數據庫或者新建的數據庫創建一個數據庫對象。
- transaction：這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或者回滾。
- executeSql：這個方法用於執行實際的 SQL 操作。
打開/創建數據庫
使用 openDatabase() 方法來打開已存在的數據庫，如果數據庫不存在，則會創建一個新的數據庫，代碼如下：
var dataBase = window.openDatabase('websql2', '1.0', 'userDB', 2 * 1024 * 1024, function () { });
openDatabase() 方法對應的五個參數說明：
- 數據庫名稱
- 版本號
- 描述文本
- 數據庫大小
- 創建回調函數
運行代碼後，devtools裏會創建一個名字爲websql2的WebSQL數據庫。
添加數據
由於WebSQL數據庫支持SQL操作，所以所有的CRUD操作都可以先編寫SQL語句然後通過executeSql函數來執行SQL語句。並且爲了保證數據安全，一般情況下executeSql函數都在transaction函數內進行操作。
代碼如下：
db.transaction(function (tx) {
tx.executeSql('INSERT INTO USERDETAIL (username, password) VALUES (?, ?)', [username, password]);
});
完整小案例
以下小案例利用WebSQL數據庫實現一個很簡易的用戶註冊功能。
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>register</title>
</head>
<body>
<form id="form" action="javascript:void(0)">
<input id="username" name="username" type="text" placeholder="請輸入用戶名">
<input id="oldPassword" name="oldPassword" type="password" placeholder="請輸入密碼">
<input id="newPassword" name="newPassword" type="password" placeholder="請再次輸入密碼">
<input type="submit" value="提 交">
</form>
<script src="../js//register.js"></script>
</body>
</html>
js代碼：
const form = document.getElementById('form');
form.addEventListener('submit', submitHandler);
//創建數據庫
var dataBase = window.openDatabase('websql2', '1.0', 'userDB', 2 * 1024 * 1024, function () { });
function submitHandler(e) {
if (form.oldPassword.value != form.newPassword.value) {
alert('兩次密碼輸入不一致，請重新輸入！');
return;
}
var selectSQL = 'SELECT * FROM people WHERE USERNAME = ?';
dataBase.transaction(function (tx) {
//創建表
tx.executeSql('CREATE TABLE IF NOT EXISTS people (username, password)');
tx.executeSql(selectSQL, [form.username.value], function (ctx, result) {
if (result.rows.length != 0) {
alert('此用戶名已存在！');
} else {
//插入新數據
tx.executeSql('INSERT INTO people (username, password) VALUES (?, ?)', [form.username.value, form.oldPassword.value]);
alert(form.username.value+'，註冊成功！');
window.location.href='../html/login.html';
}
},
function (tx, error) {
alert('查詢失敗: ' + error.message);
});
});
}
IndexDB
IndexedDB 鼓勵使用的基本模式如下所示：
- 打開數據庫。
- 在數據庫中創建一個對象倉庫（object store）。
- 啓動一個事務，併發送一個請求來執行一些數據庫操作，像增加或提取數據等。
- 通過監聽正確類型的 DOM 事件以等待操作完成。
- 在操作結果上進行一些操作（可以在 request 對象中找到）。
打開/創建數據庫
使用indexedDB.open() 方法來打開已存在的數據庫，如果數據庫不存在，則會創建一個新的數據庫，
代碼如下：
var request = indexedDB.open("hello", 1);
這個方法接受兩個參數，第一個參數是字符串，表示數據庫的名字。如果指定的數據庫不存在，就會新建數據庫。第二個參數是整數，表示數據庫的版本。如果省略，打開已有數據庫時，默認爲當前版本；新建數據庫時，默認爲1。
indexedDB.open()方法返回一個 Request 對象。這個對象通過三種事件error、success、upgradeneeded，處理打開數據庫的操作結果。
添加數據
再次操作前，我們還需要先創建一個對象倉庫，然後啓動事務並在事務函數裏進行增添操作。
由於IndexedDB數據庫不支持SQL語句，所以其CRUD操作分別對應着四個不同的函數：
add()，delete()，push()，get()。
示例代碼：
var request = indexedDB.open("userData", 1);
const customerData = [
{ ssn: "444-44-4444", username: "Bill", password: 'dyhqg31123'}
];
request.onerror = function(event) {
// 錯誤處理
};
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore("people", { keyPath: "ssn" });
objectStore.createIndex("username", "username", { unique: false });
// 使用事務的 oncomplete 事件確保在插入數據前對象倉庫已經創建完畢
objectStore.transaction.oncomplete = function(event) {
// 將數據保存到新創建的對象倉庫
var customerObjectStore = db.transaction("people", "readwrite").objectStore("people");
customerData.forEach(function(customer) {
//添加數據
customerObjectStore.add(customer);
});
};
};
注：當創建一個新的數據庫或者增加已存在的數據庫的版本號（當打開數據庫時，指定一個比之前更大的版本號）， onupgradeneeded 事件會被觸發，onupgradeneeded 是唯一可以修改數據庫結構的地方。
結語
這篇文章主要是敘述了js代碼和devtools操作前端數據庫的一些簡單操作，我本人此篇博客也參考了很多其它資料，更多有關前端數據庫的內容可參考我下面給出的鏈接。
MDN文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB
博客園博客：https://www.cnblogs.com/ljwsyt/p/9760266.html
devtools文檔：https://developers.google.com/web/tools/chrome-devtools/storage/indexeddb