HTML是目前最流行的頁面語言之一。在Web開發(fā)中，我們經(jīng)常需要將HTML中的數(shù)據(jù)存儲在數(shù)據(jù)庫中。MySQL是最流行的開源關系型數(shù)據(jù)庫之一。在這篇文章中，我們將討論如何在HTML中存儲MySQL數(shù)據(jù)庫。

在創(chuàng)建網(wǎng)站時，我們通常使用服務器端語言（如PHP或Node.js）與數(shù)據(jù)庫通信來存儲和檢索數(shù)據(jù)。或者我們可以使用客戶端語言（如JavaScript）與服務器端API通信。但是，對于小型項目或必須使用靜態(tài)HTML文件的情況，我們?nèi)绾卧贖TML中存儲和檢索數(shù)據(jù)呢？

答案是使用Web Storage API。Web Storage API是一種瀏覽器內(nèi)部存儲機制，允許開發(fā)人員在客戶端存儲和檢索數(shù)據(jù)。它有兩種存儲方式：localStorage和sessionStorage。localStorage存儲在設備上，即使瀏覽器關閉也不會丟失。而sessionStorage在瀏覽器會話結束時會被刪除。

接下來，我們將使用JavaScript和MySQL創(chuàng)建一個基本的注冊表單，在HTML中存儲數(shù)據(jù)。

//建立數(shù)據(jù)庫連接
var mysql = require('mysql');
var con = mysql.createConnection({
host: "localhost",
user: "yourusername",
password: "yourpassword",
database: "mydb"
});
//創(chuàng)建表格
con.connect(function(err) {
if (err) throw err;
console.log("Connected!");
var sql = "CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255), email VARCHAR(255), password VARCHAR(255))";
con.query(sql, function (err, result) {
if (err) throw err;
console.log("Table created");
});
});
//將數(shù)據(jù)插入表格
con.connect(function(err) {
if (err) throw err;
console.log("Connected!");
var sql = "INSERT INTO users (name, email, password) VALUES ('John Doe', 'john@example.com', '123456')";
con.query(sql, function (err, result) {
if (err) throw err;
console.log("1 record inserted");
});
});

我們來看一下HTML文件如何檢索數(shù)據(jù)：

//顯示存儲在localStorage中的用戶名
var username = localStorage.getItem("username");
document.getElementById("username").innerHTML = username;
//顯示存儲在localStorage中的電子郵件
var email = localStorage.getItem("email");
document.getElementById("email").innerHTML = email;
//顯示存儲在localStorage中的密碼
var password = localStorage.getItem("password");
document.getElementById("password").innerHTML = password;

總結一下，雖然HTML不是一種數(shù)據(jù)庫管理系統(tǒng)，但我們可以使用Web Storage API將數(shù)據(jù)存儲在客戶端。這對于小型項目或必須使用靜態(tài)HTML文件的情況非常有用。