我将indexDB API 与 HTML5 表单一起使用。出于某种原因，当我向其中添加新条目时，它会立即在 Firefox 中显示，但在 Chrome 中直到我刷新页面才会显示。
JS：
var mainForm, fName, lName, uName, pass, email, dob, phone, bio, nl, terms, school, gender, save, reset, db;
function startDB(){
mainForm = document.getElementById('mainForm');
fname = document.getElementById('fName');
lName = document.getElementById('lName');
users = document.getElementById('uName');
pass = document.getElementById('password');
email = document.getElementById('email');
dob = document.getElementById('dob');
phone = document.getElementById('phone');
bio = document.getElementById('bio');
nl = document.getElementById('newsletter');
terms = document.getElementById('terms');
school = document.getElementById('school');
gender = document.getElementsByName('gender');
save = document.getElementById('save');
reset = document.getElementById('reset');
databox = document.getElementById('databox');
save.addEventListener('click',addObject);
//open DB
var request = indexedDB.open('macroPlay');
//if fails
request.addEventListener('error', showerror);
//if succeeds
request.addEventListener('success', start);
//if !exist, create.
request.addEventListener('upgradeneeded', createdb);
}
function showerror(e){
alert('Error: ' + e.code + ' - ' + e.message);
}
function start(e){
db = e.target.result;
showUsers();// Show all values in the object store
}
function createdb(e){
var datababase = e.target.result;
var myusers = datababase.createObjectStore('users', {keyPath: 'userName'});
}
function addObject(){
var fName = document.getElementById('fName').value;
var lName = document.getElementById('lName').value;
var userName = document.getElementById('uName').value;
var pass = document.getElementById('password').value;
var email = document.getElementById('email').value;
var dob = document.getElementById('dob').value;
var phone = document.getElementById('phone').value;
var bio = document.getElementById('bio').value;
var nl = document.getElementById('nl').value;
var terms = document.getElementById('terms').value;
var school = document.getElementById('school').value;
//May need to set a loop to find value of radio
var gender;
var radios = document.getElementsByName('gender');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
gender=radios[i].value;
}
}
//set up transaction
var mytransaction = db.transaction(['users'], "readwrite");
//get object store
var myusers = mytransaction.objectStore('users');
//Add item
var request = myusers.add(new getUser(userName,fName,lName,pass,email,dob,phone,bio,nl,terms,school,gender));
// Show all results.
request.addEventListener('success', showUsers);
//Reset Form Fields
clearForm();
}
function getUser(userName, fn, ln, pw, em, dob, tel, bio, nl,tm, scl, gender){
this.userName = userName;
this.fn = fn;
this.ln = ln;
this.pw = pw;
this.em = em;
this.dob = dob;
this.tel = tel;
this.bio = bio;
this.nl = nl;
this.tm = tm;
this.scl = scl;
this.gender = gender;
}
function showUsers(){
//reset box
databox.innerHTML = '';
//set the transaction
var mytransaction = db.transaction(['users']);
//get object store
var myusers = mytransaction.objectStore('users');
//open the cursor and set an order
var newcursor = myusers.openCursor(null,"prev");
//show all users on successful load of DB
newcursor.addEventListener('success',showUserList);
}
function showUserList(e){
//var result = e.target.result;
//databox.innerHTML = '<div>' + result.id + ' - ' + result.name + ' - ' + result.date + '</div>';
var cursor = e.target.result; // Capture multiple return values as a cursor
// Modify the databox to show the results
if (cursor){
databox.innerHTML += '<div>' +
cursor.value.userName + ' - ' +
cursor.value.fn+ ' - ' +
cursor.value.ln+ ' - '+
cursor.value.pw+ ' - '+
cursor.value.em+ ' - '+
cursor.value.dob+ ' - '+
cursor.value.tel+ ' - '+
cursor.value.bio+ ' - '+
cursor.value.nl+ ' - '+
cursor.value.tm+ ' - '+
cursor.value.scl+' - '+
cursor.value.gender+
' <input type="button" onclick="removeobject(\'' + cursor.value.userName + '\')" value="remove"/></div>';
// Add a remove button as inserted HTML
cursor.continue(); // Iterates over the cursor
}
}
function removeobject(keyword){
// Confirm the deletion
if(confirm('Are you sure?')){
// Set the transaction
var mytransaction = db.transaction(['users'], "readwrite");
// Get the object store
var mystore = mytransaction.objectStore('users');
// Delete the record with the chosen index
var request = mystore.delete(keyword);
// If success, show the updated results
request.addEventListener('success', showUsers);
}
}
//reset functions
function clearForm(){
//Reset form
fname = document.getElementById('fName').value='';
lName = document.getElementById('lName').value='';
uName = document.getElementById('uName').value='';
pass = document.getElementById('password').value='';
email = document.getElementById('email').value='';
dob = document.getElementById('dob').value='';
phone = document.getElementById('phone').value='';
bio = document.getElementById('bio').value='';
nl = document.getElementById('nl').value='';
terms = document.getElementById('terms').value='';
school = document.getElementById('school').value='';
gender = document.getElementsByName('gender').value='';
showUserList();
}
function reset(){
if(confirm("are you sure?")){
var f = document.getElementById("mainForm");
f.reset();
}
}