使用 localStorage 创建个人资料页面

Question

感谢您查看我的问题。我有一个程序，要求用户输入信息，基本上是一张注册表。输入将是姓名、gmail 等...此信息应显示在另一个称为个人资料页面的页面中，只需按提交按钮即可。但是，如果一个项目留空，则“必填”一词应显示在所有项目的右侧，从而重新启动整个注册表。然而，在这个过程中，我注意到没有输出，尽管有本地存储。

有什么问题吗？谢谢

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
</head>

<body>
    <div class = "container">
        <h1>Registration</h1>
        <form role = "form"  onsubmit="signUp(event);">
            <div class="form-group">
                <input type="text" name="name1" id="name1" placeholder="First Name" required>
            </div>
            <div class="form-group">
                <input type="text" name="name2" id="name2" placeholder="Last Name" required>
            </div>
            <div class="form-group">
                <input type="email" name="email" id="email" placeholder="Email Address" required>
            </div>
            <div class="form-group">
                <input type="password" name="pswrd" id="pswrd" placeholder="Password" required>
            </div>
            <div class="form-group">
                <button type="submit">Register</button>
                 
            </div>
        </form>
        <h2>Results</h2>
        <div id="results">
                
        </div>
    </div>
    <script type="text/javascript">     
        const signUp = e => {
             let forminfo = {
                fname: document.getElementById('name1').value,
                lname: document.getElementById('name2').value,
                email: document.getElementById('email').value,
                pwsrd: document.getElementById('pswrd').value 
            }
        localStorage.setItem('forminfo', JSON.stringify(forminfo));
        //console.log(localStorage.getItem('forminfo'));
        dispData();
        e.preventDefault(); 
        
        }
                
        function dispData (){
            if(localStorage.getItem('forminfo')){
            //console.log(JSON.parse(localStorage.getItem('forminfo')));
            let {fname, lname, email, pswrd} = JSON.parse(localStorage.getItem('forminfo'));
            var results = document.getElementById('results');
            results.innerHTML ='
                <table>
                    <tbody>
                        <tr>
                            <td>First Name</td>
                            <td>${name1}</td>
                        </tr>
                        <tr>
                            <td>Last Name</td>
                            <td>${name2}</td>
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td>${email}</td>
                        </tr>
                        <tr>
                            <td>Password</td>
                            <td>${pswrd}</td>
                        </tr>
                    </tbody>
                </table>
            ';  
        }
        dispData();     

    </script>
</body>
</html>

Answer 1

切勿在用户脚本中使用 .onclick()！

用户脚本在沙箱（“孤立世界”）中运行，onclick() 在 target-page 范围内运行，看不到您的脚本创建的任何函数。

始终使用addEventListener()

像这样：

var button = document.getElementById('button');

button.addEventListener ("click", () => {
    var name = document.getElementById('name1');   
    console.log(name.value);
});

<div class = "container">
        <h1>Registration</h1>
        <form action="">
            <div class="form-group">
                <input type="text" name="name1" id="name1" placeholder="First Name" required>
            </div>
            <div class="form-group">
                <button id="button">Register</button>
            </div>
        </form>
        <h2>Results</h2>
        <div id="results">
        
        </div>
    </div>

Answer 2

好的，现在我给你解决了here

let button = document.getElementById("signup");

button.addEventListener('click', () => {
  let forminfo = {
    fname: document.getElementById('name1').value,
    lname: document.getElementById('name2').value,
    email: document.getElementById('email').value,
    pswrd: document.getElementById('pswrd').value 
  };
  dispData(forminfo);
});
                    
function dispData(forminfo) {
  if(forminfo) {
    var results = document.getElementById('results');
    results.innerHTML = `<table
                          <tbody>
                            <tr>
                                <td>First Name</td>
                                <td>${forminfo.fname}</td>
                            </tr>
                            <tr>
                                <td>Last Name</td>
                                <td>${forminfo.lname}</td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td>${forminfo.email}</td>
                            </tr>
                            <tr>
                                <td>Password</td>
                                <td>${forminfo.pswrd}</td>
                            </tr>
                        </tbody>
                    </table>`;  
    }
}

        <div class = "container">
            <h1>Registration</h1>
            <div>
                <div class="form-group">
                    <input type="text" name="name1" value="test" id="name1" placeholder="First Name" required>
                </div>
                <div class="form-group">
                    <input type="text" name="name2" value="test" id="name2" placeholder="Last Name" required>
                </div>
                <div class="form-group">
                    <input type="email" value="test@test.de" name="email" id="email" placeholder="Email Address" required>
                </div>
                <div class="form-group">
                    <input type="password" value="test" name="pswrd" id="pswrd" placeholder="Password" required>
                </div>
                <div class="form-group">
                    <button type="submit" id="signup">Register</button>
                     
                </div>
            </div>
            <h2>Results</h2>
            <div id="results">
                    
            </div>
        </div>

使用 localStorage 创建个人资料页面

Create profile page using localStorage

html

javascript

local-storage