本地存储不存储数据[重复]答案

【问题标题】：local storage not storing data [duplicate]本地存储不存储数据[重复]
【发布时间】：2021-10-05 14:10:08
【问题描述】：

我正在为我的网站建立一个登录页面，

客户端代码

<!DOCTYPE html>
<html>
<head>
<div class="header">
    <h1>create new account</h1>
</div>
<div class="container">
    <div class="form">
        <form action="/api/db" method="POST">
            <div>
                <input type="text" name="name" id="name" 
                   placeholder="name" required/>
            </div>
            <div>
                <input type="password" name="password" 
                id="password" placeholder="password" required>
            </div>
            <div>
                <button type="submit">create new 
                                        account</button>
            </div>
        </form>
    </div>
</div>
</head>
<body>
<link rel="stylesheet" href="style.css">
<script>
    let name = document.querySelector('#name').value
    let password = document.querySelector('#password').value
    let form = document.querySelector('form')
    const { cookie } = document
    form.addEventListener('submit', (e) => {
      localStorage.setItem('name', name)
      localStorage.setItem('password', password)
    })
</script>

服务器代码

class User {
   constructor(name, password) {
     this.name = name
     this.password = password
   }
 }
 const Datastore = require('nedb')
 const express = require('express')
 const app = express()
 const database = new Datastore('database.db')
 database.loadDatabase()

 app.post('/api/db', (req, res) => {
    let name = req.body.name
   let password = req.body.password
   database.insert(new User(name, password))
   res.redirect('/chat')
 })

我在表单中输入了名称和密码，当用户提交表单时，脚本应将名称和密码保存在 localStorage 中，但是当我在“应用程序”选项卡中检查本地存储时，项目是“未定义的”

编辑： #oops 我才意识到我的问题是多么愚蠢

【问题讨论】：

为什么你的页面内容在文档头里面？我会先解决这个问题。
let name = document.querySelector(...) 在您单击按钮之前执行，因此输入还没有任何值...将该代码移到事件处理程序主体中。
还有一个 document.getElementById 来获取 ID - 不需要查询选择器，它不太具体

标签： javascript html local-storage

【解决方案1】：

这是因为您在用户提交表单之前获取了输入值。您需要在提交事件触发时准确获取它们。例如：

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  const name = form.querySelector('#name').value
  const password = form.querySelector('#password').value
  localStorage.setItem('name', name)
  localStorage.setItem('password', password)
})

【讨论】：

我确信这是一个骗局，或者它可以被关闭为“typo-type”
@mplungjan 是的，终于找到了，已经标记了。