前端：一文帶大家了解WebSQL相關(guān)的知識(shí)
一、WebSQL 是什么？
WebSQL作為瀏覽器環(huán)境中的輕量級(jí)關(guān)系型數(shù)據(jù)庫(kù)解決方案，允許前端開(kāi)發(fā)者直接使用熟悉的SQL語(yǔ)法操作客戶(hù)端數(shù)據(jù)存儲(chǔ)。其本質(zhì)是基于SQLite的瀏覽器封裝，通過(guò)異步JavaScript接口提供完整的SQL數(shù)據(jù)庫(kù)操作能力。它允許開(kāi)發(fā)者在瀏覽器中創(chuàng)建和操作數(shù)據(jù)庫(kù)，實(shí)現(xiàn)數(shù)據(jù)的持久化存儲(chǔ)，該技術(shù)對(duì)于開(kāi)發(fā)離線應(yīng)用、單頁(yè)應(yīng)用（SPA）等場(chǎng)景來(lái)說(shuō)，可以顯著提升應(yīng)用的性能和用戶(hù)體驗(yàn)。作為一名合格的前端程序員來(lái)說(shuō)，了解這項(xiàng)技術(shù)還是非常有必要的。今天給大家分享關(guān)于WebSQL相關(guān)的知識(shí)，感興趣的可以一起了解一下！
二、WebSQL如何打開(kāi)？
在谷歌瀏覽器開(kāi)發(fā)者工具中，WebSQL 可以很輕松找到入口，這個(gè)對(duì)于許多前端開(kāi)發(fā)者都是非常熟悉。首先打開(kāi)谷歌瀏覽器，按下 F12 鍵或通過(guò)右鍵點(diǎn)擊頁(yè)面選擇 “檢查”，便能打開(kāi)強(qiáng)大的谷歌開(kāi)發(fā)者工具。
圖片
接著，在眾多面板中找到 “Application 應(yīng)用” 面板，左側(cè)的樹(shù)形菜單中存儲(chǔ)根節(jié)點(diǎn)包含了 Cookies、Local Storage、Session Storage、IndexedDB 和 Web SQL 等。
圖片
然后點(diǎn)擊 “Web SQL” 選項(xiàng)，所有相關(guān)數(shù)據(jù)庫(kù)、表以及表中的數(shù)據(jù)便可以非常直觀的看到 。
圖片
借助谷歌開(kāi)發(fā)者工具，開(kāi)發(fā)者不僅能輕松查看數(shù)據(jù)庫(kù)的結(jié)構(gòu)，了解各個(gè)表之間的關(guān)聯(lián)，還能實(shí)時(shí)查看表中的數(shù)據(jù)，對(duì)數(shù)據(jù)的變化進(jìn)行監(jiān)控。比如在開(kāi)發(fā)一個(gè)簡(jiǎn)單的待辦應(yīng)用時(shí)，就可以通過(guò)開(kāi)發(fā)者工具查看 WebSQL 中存儲(chǔ)的任務(wù)列表，確認(rèn)數(shù)據(jù)是否正確存儲(chǔ)和更新。
三、WebSQL 的使用方法
3.1 核心方法介紹
WebSQL 的使用主要依賴(lài)三個(gè)核心方法，熟練掌握它們是運(yùn)用 WebSQL 的關(guān)鍵。
openDatabase 方法用于創(chuàng)建或打開(kāi)一個(gè)數(shù)據(jù)庫(kù)。它就像是一把鑰匙，能打開(kāi)數(shù)據(jù)庫(kù)的大門(mén)，如果數(shù)據(jù)庫(kù)不存在，它還能幫我們新建一個(gè)。比如：
var db = openDatabase('webSQLDB', '1.0', 'WebSQL數(shù)據(jù)庫(kù)測(cè)試', 50 * 1024 * 1024);
var db = openDatabase('webSQLDB', '1.0', 'WebSQL數(shù)據(jù)庫(kù)測(cè)試', 50 * 1024 * 1024);參數(shù)說(shuō)明：
數(shù)據(jù)庫(kù)名稱(chēng)：webSQLDB
版本號(hào)：1.0
數(shù)據(jù)庫(kù)描述：WebSQL數(shù)據(jù)庫(kù)測(cè)試
數(shù)據(jù)庫(kù)大?。?0 * 1024 * 1024 大小為50MB
WebSQL也支持事務(wù)用法，使用transaction 。
transaction 方法主要用于管理事務(wù)，它確保一系列數(shù)據(jù)庫(kù)操作要么全部成功執(zhí)行，要么全部失敗回滾，和我們常見(jiàn)的關(guān)系型數(shù)據(jù)庫(kù)相似，用來(lái)保證數(shù)據(jù)庫(kù)操作的一致性和完整性。具體用法如下圖：
db.transaction(function (tx) { // 這里放置具體的數(shù)據(jù)庫(kù)操作});
db.transaction(function (tx) {
// 這里放置具體的數(shù)據(jù)庫(kù)操作
});executeSql 方法則是真正執(zhí)行 SQL 語(yǔ)句的執(zhí)行者，它可以執(zhí)行創(chuàng)建表、插入數(shù)據(jù)、查詢(xún)數(shù)據(jù)等各種 SQL 操作。
-- 創(chuàng)建表如果表不存在的情況下tx.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, name,age)');
-- 創(chuàng)建表如果表不存在的情況下
tx.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, name,age)');3.2 實(shí)戰(zhàn)示例
這里我們直接使用谷歌開(kāi)發(fā)者工具實(shí)際操作一下
創(chuàng)建數(shù)據(jù)庫(kù)：
var db = openDatabase('testDB', '1.0', 'Test Database', 5 * 1024 * 1024);console.log('testDB數(shù)據(jù)庫(kù)已創(chuàng)建或打開(kāi)');
var db = openDatabase('testDB', '1.0', 'Test Database', 5 * 1024 * 1024);
console.log('testDB數(shù)據(jù)庫(kù)已創(chuàng)建或打開(kāi)');說(shuō)明：創(chuàng)建一個(gè)大小為5MB數(shù)據(jù)庫(kù)名稱(chēng)為testDB的數(shù)據(jù)庫(kù)。
創(chuàng)建表：
db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS users(id INTEGER PRIMARY KEY, name TEXT, age INTEGER)'); console.log('表已創(chuàng)建');});
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS users(id INTEGER PRIMARY KEY, name TEXT, age INTEGER)');
console.log('表已創(chuàng)建');
});說(shuō)明： testDB 數(shù)據(jù)庫(kù)中創(chuàng)建了一個(gè)名為 users的表，表中有 id（主鍵，整數(shù)類(lèi)型）、name（文本類(lèi)型）和 age（整數(shù)類(lèi)型）三個(gè)字段。
圖片
插入數(shù)據(jù)：
var name = '小明';var age = 30;db.transaction(function (tx) { tx.executeSql('INSERT INTO users (name, age) VALUES (?,?)', [name, age], function () { console.log('數(shù)據(jù)插入成功'); }, function (error) { console.log('數(shù)據(jù)插入失敗: ', error.message); });});
var name = '小明';
var age = 30;
db.transaction(function (tx) {
tx.executeSql('INSERT INTO users (name, age) VALUES (?,?)', [name, age], function () {
console.log('數(shù)據(jù)插入成功');
}, function (error) {
console.log('數(shù)據(jù)插入失敗: ', error.message);
});
});說(shuō)明：向 users表中插入了一條學(xué)生數(shù)據(jù)，這里使用占位符 ? 來(lái)傳遞實(shí)際數(shù)據(jù)，可以避免 SQL 注入風(fēng)險(xiǎn)。
圖片
數(shù)據(jù)插入后我們直接切換到開(kāi)發(fā)者工具控制臺(tái)去查看，如下圖表示創(chuàng)建成功了。
圖片
接著通過(guò)控制臺(tái)直接使用sql語(yǔ)句讀取數(shù)據(jù)：
db.transaction(function (tx) { tx.executeSql('SELECT * FROM users', [], function (tx, results) { var len = results.rows.length; for (var i = 0; i < len; i++) { var user = results.rows.item(i); console.log('用戶(hù)信息: ', user.name, user.age); } }, function (error) { console.log('數(shù)據(jù)讀取失敗: ', error.message); });});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM users', [], function (tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
var user = results.rows.item(i);
console.log('用戶(hù)信息: ', user.name, user.age);
}
}, function (error) {
console.log('數(shù)據(jù)讀取失敗: ', error.message);
});
});說(shuō)明：查詢(xún)users所有數(shù)據(jù)，并將每條數(shù)據(jù)的學(xué)生姓名和年齡打印出來(lái)。
圖片
更新數(shù)據(jù)：
var age = 28;var id = 1;db.transaction(function (tx) { tx.executeSql('UPDATE users SET age =? WHERE id =?', [age, id], function () { console.log('數(shù)據(jù)更新成功'); }, function (error) { console.log('數(shù)據(jù)更新失敗: ', error.message); });});
var age = 28;
var id = 1;
db.transaction(function (tx) {
tx.executeSql('UPDATE users SET age =? WHERE id =?', [age, id], function () {
console.log('數(shù)據(jù)更新成功');
}, function (error) {
console.log('數(shù)據(jù)更新失敗: ', error.message);
});
});說(shuō)明： id 為 1 的用戶(hù)年齡更新為 28 。
圖片
刪除數(shù)據(jù)：
var id = 1;db.transaction(function (tx) { tx.executeSql('DELETE FROM users WHERE id =?', [id], function () { console.log('數(shù)據(jù)刪除成功'); }, function (error) { console.log('數(shù)據(jù)刪除失敗: ', error.message); });});
var id = 1;
db.transaction(function (tx) {
tx.executeSql('DELETE FROM users WHERE id =?', [id], function () {
console.log('數(shù)據(jù)刪除成功');
}, function (error) {
console.log('數(shù)據(jù)刪除失敗: ', error.message);
});
});說(shuō)明：從 users表中刪除 id 為 1 的用戶(hù)數(shù)據(jù)。
四、WebSQL 的使用場(chǎng)景
4.1 用戶(hù)認(rèn)證系統(tǒng)
在用戶(hù)認(rèn)證系統(tǒng)中，WebSQL是一個(gè)不錯(cuò)的選擇，它為用戶(hù)數(shù)據(jù)的安全存儲(chǔ)與高效驗(yàn)證提供了堅(jiān)實(shí)的支持。當(dāng)用戶(hù)進(jìn)行注冊(cè)時(shí)，注冊(cè)信息如用戶(hù)名、密碼、郵箱等會(huì)被前端收集，然后通過(guò) WebSQL 存儲(chǔ)到本地?cái)?shù)據(jù)庫(kù)中。在存儲(chǔ)過(guò)程中，可以對(duì)密碼進(jìn)行加密處理，進(jìn)一步保障用戶(hù)數(shù)據(jù)的安全性 。示例：
var username = 'newUser';var encryptedPassword = 'encryptedPwd123'; // 假設(shè)已經(jīng)經(jīng)過(guò)加密處理var email = 'newUser@example.com';db.transaction(function (tx) { tx.executeSql('INSERT INTO Users (username, password, email) VALUES (?,?,?)', [username, encryptedPassword, email], function () { console.log('用戶(hù)注冊(cè)信息存儲(chǔ)成功'); }, function (error) { console.log('用戶(hù)注冊(cè)信息存儲(chǔ)失敗: ', error.message); });});
var username = 'newUser';
var encryptedPassword = 'encryptedPwd123'; // 假設(shè)已經(jīng)經(jīng)過(guò)加密處理
var email = 'newUser@example.com';
db.transaction(function (tx) {
tx.executeSql('INSERT INTO Users (username, password, email) VALUES (?,?,?)', [username, encryptedPassword, email], function () {
console.log('用戶(hù)注冊(cè)信息存儲(chǔ)成功');
}, function (error) {
console.log('用戶(hù)注冊(cè)信息存儲(chǔ)失敗: ', error.message);
});
});當(dāng)用戶(hù)登錄時(shí)，前端獲取用戶(hù)輸入的用戶(hù)名和密碼，可以先從 WebSQL 中查詢(xún)對(duì)應(yīng)的用戶(hù)信息進(jìn)行驗(yàn)證。如果查詢(xún)到匹配的用戶(hù)信息且密碼驗(yàn)證通過(guò)，則允許用戶(hù)登錄，大大提高了登錄驗(yàn)證的效率，減少了與服務(wù)器的交互次數(shù)，提升了用戶(hù)體驗(yàn) 。
4.2 內(nèi)容管理系統(tǒng)
以 WordPress 和 Drupal 等知名的 CMS 系統(tǒng)為例，WebSQL 在內(nèi)容的創(chuàng)建、更新和刪除操作中發(fā)揮著關(guān)鍵作用。在 WordPress 中，當(dāng)用戶(hù)創(chuàng)建一篇新文章時(shí)，文章的標(biāo)題、內(nèi)容、發(fā)布時(shí)間、分類(lèi)等信息會(huì)被保存到 WebSQL 數(shù)據(jù)庫(kù)中。
-- 創(chuàng)建文章表CREATE TABLE IF NOT EXISTS wp_posts ( ID bigint(20) unsigned NOT NULL auto_increment, post_author bigint(20) unsigned NOT NULL default '0', post_date datetime NOT NULL default '0000-00-00 00:00:00', post_content longtext NOT NULL, post_title text NOT NULL, post_status varchar(20) NOT NULL default 'publish', post_name varchar(200) NOT NULL default '', PRIMARY KEY (ID), KEY post_name (post_name), KEY type_status_date (post_type,post_status,post_date,ID), KEY post_parent (post_parent), KEY post_author (post_author));
-- 創(chuàng)建文章表
CREATE TABLE IF NOT EXISTS wp_posts (
ID bigint(20) unsigned NOT NULL auto_increment,
post_author bigint(20) unsigned NOT NULL default '0',
post_date datetime NOT NULL default '0000-00-00 00:00:00',
post_content longtext NOT NULL,
post_title text NOT NULL,
post_status varchar(20) NOT NULL default 'publish',
post_name varchar(200) NOT NULL default '',
PRIMARY KEY (ID),
KEY post_name (post_name),
KEY type_status_date (post_type,post_status,post_date,ID),
KEY post_parent (post_parent),
KEY post_author (post_author)
);當(dāng)用戶(hù)更新文章時(shí)，WebSQL 會(huì)根據(jù)文章的 ID 找到對(duì)應(yīng)的記錄，更新相應(yīng)的字段。而在刪除文章時(shí)，則通過(guò)執(zhí)行 DELETE 語(yǔ)句，將指定 ID 的文章記錄從數(shù)據(jù)庫(kù)中移除，確保內(nèi)容管理的高效與準(zhǔn)確 。
4.3 電商平臺(tái)
在電商平臺(tái)中，WebSQL 貫穿于多個(gè)核心業(yè)務(wù)環(huán)節(jié)。比如在管理產(chǎn)品庫(kù)存方面，WebSQL 可以實(shí)時(shí)記錄產(chǎn)品的庫(kù)存數(shù)量、價(jià)格、規(guī)格等信息。當(dāng)有訂單產(chǎn)生時(shí)，通過(guò) WebSQL 可以快速查詢(xún)庫(kù)存情況，判斷是否有足夠的庫(kù)存發(fā)貨 。
var productId = 1;var orderQuantity = 5;db.transaction(function (tx) { tx.executeSql('SELECT stock FROM Products WHERE product_id =?', [productId], function (tx, results) { var stock = results.rows.item(0).stock; if (stock >= orderQuantity) { // 有足夠庫(kù)存，更新庫(kù)存數(shù)量 tx.executeSql('UPDATE Products SET stock = stock -? WHERE product_id =?', [orderQuantity, productId], function () { console.log('庫(kù)存更新成功'); }, function (error) { console.log('庫(kù)存更新失敗: ', error.message); }); } else { console.log('庫(kù)存不足'); } }, function (error) { console.log('查詢(xún)庫(kù)存失敗: ', error.message); });});
var productId = 1;
var orderQuantity = 5;
db.transaction(function (tx) {
tx.executeSql('SELECT stock FROM Products WHERE product_id =?', [productId], function (tx, results) {
var stock = results.rows.item(0).stock;
if (stock >= orderQuantity) {
// 有足夠庫(kù)存，更新庫(kù)存數(shù)量
tx.executeSql('UPDATE Products SET stock = stock -? WHERE product_id =?', [orderQuantity, productId], function () {
console.log('庫(kù)存更新成功');
}, function (error) {
console.log('庫(kù)存更新失敗: ', error.message);
});
} else {
console.log('庫(kù)存不足');
}
}, function (error) {
console.log('查詢(xún)庫(kù)存失敗: ', error.message);
});
});對(duì)于訂單信息，WebSQL 可以存儲(chǔ)訂單編號(hào)、用戶(hù) ID、訂單狀態(tài)、商品明細(xì)等內(nèi)容，方便訂單的跟蹤和管理。在用戶(hù)購(gòu)物車(chē)功能中，WebSQL 可以存儲(chǔ)用戶(hù)添加到購(gòu)物車(chē)的商品信息，包括商品 ID、數(shù)量、價(jià)格等，用戶(hù)在購(gòu)物過(guò)程中隨時(shí)可以查看、修改購(gòu)物車(chē)內(nèi)容，WebSQL 能夠快速響應(yīng)這些操作，提升了用戶(hù)體驗(yàn)也減輕了服務(wù)器的壓力。
五、總結(jié)
需要注意的是，WebSQL 目前已被棄用 ，在使用時(shí)一定要充分考慮瀏覽器兼容性問(wèn)題，避免在項(xiàng)目中盲目使用而導(dǎo)致兼容性風(fēng)險(xiǎn)。在現(xiàn)代前端開(kāi)發(fā)中，IndexedDB 等新興技術(shù)正逐漸成為更優(yōu)的選擇，它們?cè)诠δ芎托阅苌嫌兄錾谋憩F(xiàn)。
WebSQL 作為前端數(shù)據(jù)存儲(chǔ)的一種方式，以其對(duì) SQL 的支持、事務(wù)處理能力以及在谷歌瀏覽器開(kāi)發(fā)者工具中的便捷操作，在特定場(chǎng)景下展現(xiàn)出獨(dú)特的優(yōu)勢(shì)。希望本文對(duì)大家了解該技術(shù)提供一些幫助！
