Question

我正在尝试将数据保存在Submit.html页面上。数据存储在本地存储中，我希望输入的数据总是在每次访问该页面时都在表中。当前，它仅在提交事件时可见。当我返回到带有其他条目的submit.html页面时，以前的数据不见了。

这是代码。

1-index.html

<!DOCTYPE html>
<html>
<head>
    <title>User Registration</title>
</head>
    <body>
        <h1>User Registration Form</h1>
        <form action="submit.html" onsubmit="callme()">
                Name:<br>
                <input id="name" type="text">
                <br>
                Adress:<br>
                <input id="address" type="text">
                <br>
                Email:<br>
                <input id="email" type="email">
                <br>
                Phone:<br>
                <input id="phone" type="number">
                <br><br>
                <input type="submit" value="Submit">
                <input type="reset" value="Reset" name="Reset">
        </form>
        <script>
            function callme(){
                var name = document.getElementById('name').value;
                localStorage.setItem('name', name);
                var address = document.getElementById('address').value;
                localStorage.setItem('address', address);
                var email = document.getElementById('email').value;
                localStorage.setItem('email', email);
                var phone = document.getElementById('phone').value;
                localStorage.setItem('phone', phone);

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

2-Submit.html

<!DOCTYPE html>
<html>
<head>
    <title>Detail Page</title>
</head>
    <body>
        <h1>User Detail Page</h1>
        <div id="result-table">
                <table border="1">
                    <tr>
                        <th>Name</td>
                        <th>Address</td>
                        <th>Email</th>
                        <th>Phone</td>
                    </tr>
                    <tr>
                        <td id="first"></td>
                        <td id="second"></td>
                        <td id="third"></td>
                        <td id="fourth"></td>
                    </tr>
                </table>
                <br>
            </div>

        <script>
            window.onload = function() {
                document.getElementById('first').innerText = localStorage.getItem('name');
                document.getElementById('second').innerText = localStorage.getItem('address');
                document.getElementById('third').innerText = localStorage.getItem('email');
                document.getElementById('fourth').innerText = localStorage.getItem('phone');

            };
        </script>
        <form action="/index.html">
            <button >Go Back</button>
        </form>
    </body>
</html>

Answer 1

我从您的代码中了解到，您用先前的数据覆盖了现有数据，而是将值设置为本地存储中的单个键，并使用先前的数据副本在本地将其设置为本地，并在每次提交时向其中添加新数据如果您可以提交多个表单并可以在表格中显示。

var name = document.getElementById('name').value;
var address = document.getElementById('address').value;
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;

let formData = {};
formData.name = name;
formData.email = email;
formData.address = address;
formData.phone = phone;

let formDataArry = localStorage.getItem('formDataArry') || []

formDataArry.push(formData)

localStorage.setItem('formDataArry',formDataArry )

然后，您可以循环使用表中的数组以从本地存储中获取带有数据的表

Answer 2

您可以在本地存储中存储一个包含JSON编码的 array 的条目。该数组中的每个条目都需要具有您感兴趣的四个值。因此，在某个特定时刻，单个localStorage条目可能具有一个（字符串）值，如下所示：

'[ { "name": "Mary", "address": "Straight street 1", "email": "mary@abc.com", "phone": "0123" }, 
   { "name": "John", "address": "Highstreet 10", "email": "john@yho.com", "phone": "321" } ]'

您可以在现有页面的JS中进行编码：

index.html

function getData() {
    return JSON.parse(localStorage.getItem('data') || "[]");
}

function callme() {
    const data = getData();
    const obj = Object.assign(...["name", "address", "email", "phone"].map(prop => 
         ({ [prop]: document.getElementById(prop).value }))
    );
    localStorage.setItem('data', JSON.stringify(data.concat(obj)));
}

submit.html

function getData() {
    return JSON.parse(localStorage.getItem('data') || "[]");
}

window.onload = function() {
    const tr = document.querySelector('#result-table tr:last-child');
    const tbody = tr.parentNode;
    const data = getData();
    for (let i = 1; i < data.length; i++) {
        tbody.appendChild(tr.cloneNode(true));
    }
    data.forEach((row, i) => 
        Object.keys(row).forEach(prop => 
            tbody.rows[i+1].querySelector('.' + prop).textContent = row[prop]
        );
    );
};

如何显示从本地存储获取的数据到简单的HTML页面

2 个答案: