使用 IndexedDB 和 JavaScript 登录页面时出错

Question

我正在为 Electron js webapp 制作一个登录/注册页面。

我只使用 JavaScript、HTML 和 CSS，我使用 Indexedb 将用户凭证存储在数据库中。

我可以看到它在 Electron js 窗口中应用程序下的开发人员工具部分成功保存了用户名和密码，但是当用户尝试登录时我收到此错误。

用户只是被重定向到一个空白页面

Request CacheStorage.requestCacheNames failed. {"code":-32602,"message":"Invalid security origin"}"

我尝试添加一个 console.log() 来查看用户是否成功登录，但我也没有在我的控制台上看到任何内容

Here is a link to my code on codepen:
 https://codepen.io/Shant7/pen/VwEjLbR

添加 console.log() 和 alert() 以打印出正在尝试登录的用户。

这是我的 HTML 和 JS 文件

const signUpBtnLink = document.querySelector('.signUpBtn-link');
const signInBtnLink = document.querySelector('.signInBtn-link');
const wrapper = document.querySelector('.wrapper');

signUpBtnLink.addEventListener('click', () => {
    wrapper.classList.toggle('active');
});

signInBtnLink.addEventListener('click', () => {
    wrapper.classList.toggle('active');
});

// var signUpBtn = document.querySelector(".submit");


// signUpBtn.onclick = function() {
//     const username = document.getElementById("username").value;

//     const email = document.getElementById("email").value;

//     const password = document.getElementById("password").value;

    
// };

let $ = document

const registerForm = $.querySelector(".form-wrapper-sign-up")
const nameInput = $.querySelector("#username1")
const passwordInput = $.querySelector("#password")
const emailInput = $.querySelector("#email")
const table = $.querySelector("table")

let db = null
let objectStore = null

window.addEventListener("load", () => {
    let DBOpenRequest = indexedDB.open('DreamDB', 1)
    
    DBOpenRequest.addEventListener("error", err => {
        console.warn("DB Error: ", err)
    })
    DBOpenRequest.addEventListener("success", e => {
        db = e.target.result
        getUser()
        
        console.log("DB Success: ", e.target.result)
    })
    DBOpenRequest.addEventListener("upgradeneeded", e => {
        db = e.target.result
        
        console.log("DB Old Version: ", e.oldVersion)
        console.log("DB Upgraded: ", e)
        console.log("DB New Version: ", e.newVersion)
        
        if(!db.objectStoreNames.contains("users")){
            db.createObjectStore('users', {
                keyPath: "userId"
            })
        }
        
        if(db.objectStoreNames.contains("products")){
            db.deleteObjectStore('products')
        }
        
        console.log(db.objectStoreNames)
    })
})

registerForm.addEventListener("submit", e => {
    e.preventDefault()
    
    let newUserObj = {
        userId: Math.floor(Math.random() * 9999),
        name: nameInput.value,
        password: passwordInput.value,
        email: emailInput.value
    }
    
    let tx = createTransaction("users", "readwrite")
    tx.addEventListener("complete", e => {
        console.log("Write TX Complete: ", e)
    })
    
    let store = tx.objectStore("users")
    let req = store.add(newUserObj)
    
    req.addEventListener("error", err => {
        console.warn("Write REQ Error: ", err)
    })
    req.addEventListener("success", e => {
        console.log("Write REQ Success: ", e)
        clearInput()
        
        getUser()
    })
})

function getUser() {
    let tx = createTransaction("users", "readonly")
    tx.addEventListener("complete", e => {
        console.log("Get TX Complete: ", e)
    })
    
    let store = tx.objectStore("users")
    let req = store.getAll()
    
    req.addEventListener("error", err => {
        console.warn("Get REQ Error: ", err)
    })
    req.addEventListener("success", e => {
        console.log("Get REQ Success: ", e.target.result)

        alert("About to login " + nameInput);
        
//  //  let users = e.target.result
//  //  table.innerHTML = `<tr>
//     //     <th>ID</th>
//     //     <th>Name</th>
//     //     <th>Password</th>
//     //     <th>Email</th>
//     //     <th>Action</th>
//     //   </tr>`
//  //  table.innerHTML += users.map(user => {
//  //      return `<tr>
//     //     <td>${user.userId}</td>
//     //     <td>${user.name}</td>
//     //     <td>${user.password}</td>
//  //          <td>${user.email}</td>
//     //     <td><a href="#" onclick="deleteUser(${user.userId})">Delete</a></td>
//     //   </tr>`
//      }).join("")
    })
}

function e() {
    var email = document.querySelector("#username1").value;
    var password = document.querySelector("#password1").value;
    db = e.target.result;
    var tx = db.transaction(["users"], "readonly");
    var store = tx.objectStore("users");
    // get the index from the Object Store
    const index = store.index('email');
    // query by indexes
    var query = index.get(key);
    query.onsuccess = function(e) {
        console.log(query.result)
        if(query.result)
        {
            if(password != query.result.password) {
                alert("Incorrect Credentials... Please check and try again!");
            }
         else{
             console.log('Success');  
             alert("About to login " + email); 
             window.location.replace(homepage.html);

          }
       }
    };
};

function deleteUser(userId) {
    let tx = createTransaction("users", "readwrite")
    tx.addEventListener("complete", e => {
        console.log("Delete TX Complete: ", e)
    })
    
    let store = tx.objectStore("users")
    let req = store.delete(userId)
    
    req.addEventListener("error", err => {
        console.warn("Delete REQ Error: ", err)
    })
    req.addEventListener("success", e => {
        console.log("Delete REQ Success: ", e)
        
        getUser()
    })
}

function createTransaction(storeName, mode) {
    let tx = db.transaction(storeName, mode)
    tx.addEventListener("error", err => {
        console.warn("TX Error: ", err)
    })
    
    return tx
}

function clearInput() {
    nameInput.value = ''
    passwordInput.value = ''
    emailInput.value = ''
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;400;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #808080;
  font-family: 'Poppins', sans-serif;
}

.wrapper {
  position: relative;
  width: 400px;
  height: 500px;
  background: rgba(255, 255, 255, .2);
  border-radius: 20px;
  box-shadow: 0 0 50px #fff;
  padding: 40px;
}

.form-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: 1s ease-in-out;
}

.wrapper.active .form-wrapper.sign-in {
  transform: scale(0) translate(-300px, 500px);
}

.wrapper .form-wrapper.sign-up {
  position: absolute;
  top: 0;
  transform: scale(0) translate(200px, -500px);
}

.wrapper.active .form-wrapper.sign-up {
  transform: scale(1) translate(0, 0);
}

h2 {
  font-size: 30px;
  color: #fff;
  text-align: center;
  font-family: 'poppins' ,sans-serif;
}

.input-group {
  position: relative;
  margin: 30px 0;
  border-bottom: 2px solid #fff;
}

.input-group label {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
  font-family: 'Poppins', sans-serif;
}

.input-group input {
  width: 320px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  padding: 0 5px;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Poppins', sans-serif;
}

.input-group input:focus~label,
.input-group input:valid~label {
  top: -5px;
}

.remember {
  margin: -5px 0 15px 5px;
}

.remember label {
  color: #fff;
  font-size: 14px;
}

.remember label input {
  accent-color: #f4157e;
}

button {
  position: relative;
  width: 100%;
  height: 40px;
  background: #fff;
  font-size: 16px;
  color: #f4157e;
  cursor: pointer;
  border-radius: 30px;
  border: none;
  outline: none;
}

.signUp-link {
  font-size: 14px;
  text-align: center;
  margin: 15px 0;
}

.signUp-link p {
  color: #fff;
}

.signUp-link p a {
  color: #f4157e;
  text-decoration: none;
  font-weight: 500;
}

.signUp-link p a:hover {
  text-decoration: underline;
}

.social-platform {
  font-size: 14px;
  color: #fff;
  text-align: center;
}

.social-icons a {
  display: inline-block;
  width: 35px;
  height: 35px;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 35px;
  margin: 15px 6px 0;
  transition: .3s;
}

.social-icons a:hover {
  background: #fff;
}

.social-icons a i {
  color: #fff;
  font-size: 14px;
  transition: .3s;
}

.social-icons a:hover i {
  color: rgba(0, 0, 0, .3);
}

  h1{

    text-align: center;
    font-size: 45px;
    font-weight: 50;
    font-family: 'Poppins', sans-serif;
    position: absolute;
    top: 20px;
    left: 800px;
    color: white;
    
  }
  
  /* Table Start */

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 50px;
  }
  
  td,
  th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }
  
  .text-center {
    text-align: center;
  }
  
  /* Table End */
  

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dream Mirror | Login</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  <link rel="stylesheet" type="text/css" href="login.css">

  <h1><center>DREAM MIRROR</center> </h1>
  
</head>

<body>

  <div class="wrapper">
    <div class="form-wrapper sign-in">

      <form action="form-wrapper-sign-in">


        <h2>Sign In</h2>
        <div class="input-group">
          <input id ="username1" type="text" required>
          <label for="">Username</label>
        </div>
        <div class="input-group">
          <input id = "password1" type="password" required>
          <label for="">Password</label>
        </div>
        <div class="remember">
          <label><input type="checkbox"> Remember me</label>
        </div>
        
        <button> Sign In</button>

        <!-- <a href="homepage.html"></a> -->

        </a>
        <div class="signUp-link">
          <p>Don't have an account? <a href="#" class="signUpBtn-link">Sign Up</a></p>
        </div>
        <div class="social-platform">
          
          <div class="social-icons">
            
          </div>
        </div>
      </form>
    </div>

<!-- Registration Code -->

    <div class="form-wrapper sign-up">

      <form class="form-wrapper-sign-up">

        <div id ="names">

        </div>



        <h2>Sign Up</h2>
        <div class="input-group">
          <input id="username" type="text" required>
          <label for="">Username</label>
        </div>
        <div class="input-group">
          <input id="email" type="email" required>
          <label for="">Email</label>
        </div>
        <div class="input-group">
          <input id="password" type="password" required>
          <label for="">Password</label>
        </div>
        <div class="remember">
          <label><input  type="checkbox"> I agree to the terms & conditions</label>
        </div>
        <button class="submit">Sign Up</button>
        <div class="signUp-link">
          <p>Already have an account? <a href="#" class="signInBtn-link">Sign In</a></p>
        </div>
      </form>
    </div>
  </div>

  

    

  <script defer src="login.js"></script>
</body>

</html>