我相信我已经正确设置了数据库，但是当我使用Chrome检查页面时，并未创建数据库。这只是一个基本的注册页面，它包含3个输入字段并将用户添加到数据库中。此代码是从我们给出的示例中修改而来的。但是，该数据库是使用该代码创建的。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>L2</title>
</head>
<body>
<div class="container">
<h2>Event Registration Form</h2>
<div class="row">
<form class="col-md-8">
<div class="form-group row">
<label for="inputinviteID" class="col-sm-2 col-form-label">Invitation ID:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id" placeholder="Invitation ID">
</div>
</div>
<div class="form-group row">
<label for="inputName" class="col-md-2 col-form-label">Your Name:</label>
<div class="col-md-10">
<input type="text" class="form-control" id="name" placeholder="Your name">
</div>
</div>
<div class="form-group row">
<label for="inputCompany" class="col-sm-2 col-form-label">Company:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="company" placeholder="Company name">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Type:</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
Sole proprietorship
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Partnership
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios3">
Corporation
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios4">
Other
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary" id="btnRegister">Register</button>
<button type="submit" class="btn btn-secondary" id="btnCheckRegistration">Check Registration</button>
<button type="submit" class="btn btn-warning" id="btnDeleteRegistration">Delete Registration</button>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).on("pagecreate", function () {
var $id=$("#id");
var $name=$("#name");
var $company=$("#company");
var db, openRequest;
var click_event = $.support.touch ? "tap" : "click";
var dbSupported=("indexedDB" in window) ? true : false;
function showPopup(msg) {
$("#pop").html("<p>" + msg + "</p>").popup("open");
setTimeout(function(){ $("#pop").popup("close"); }, 1000);
}
if (dbSupported) {
var openRequest=window.indexedDB.open("registrationDB", 1);
openRequest.onupgradeneeded = function(event) {
console.log("DB upgrading");
//db = event.target.result;
db=openRequest.result;
if (!db.objectStoreNames.contains("registration")) {
// Notice: we use here email as DB key since email will be unique for each student
db.createObjectStore("registration", {keyPath:"id"});
}
};
openRequest.onsuccess=function(event) {
console.log("DB success");
//db = event.target.result;
db=openRequest.result;
};
openRequest.onerror=function(event) {
console.log("DB error");
//db = event.target.result;
console.dir(event);
};
}
$("#btnRegister").on(click_event, function(){
var inviteID=$id.val();
var name=$name.val();
var company=$company.val();
var errMsg='';
if (inviteID.length<1) {errMsg +='Invitation ID cannot be empty<br />';}
if (name.length<1) {errMsg +='Your name cannot be empty<br >';}
if (company.length<1) {errMsg +='Company name cannot be empty<br >';}
if ( errMsg.length>1 ) {
showPopup(errMsg);
return true;
}
// Notice: we use here email as DB key!
var person={id:inviteID, name:name, company:company};
// Initiate a transaction
var transaction = db.transaction(["registration"],"readwrite");
// No need to use in production .oncomplete and .onerror event handlers below.
// We use it here for demonstration / debugging purposes only! -> must remove in production!
transaction.oncomplete = function(event) {
console.log("Transaction Complete");
};
transaction.onerror=function(event) {
console.log("Transaction Failed")
};
// Add/Update student info. Notice the difference: .add() vs .put() !!!
var storeRequest=transaction.objectStore("registration").put(person);
storeRequest.onsuccess =function() {
showPopup("Info Saved");
};
storeRequest.onerror=function() {
showPopup("Database Error: cannot save Info");
};
});
});
</script>
</body>
</html>