Как отобразить данные, извлеченные из локального хранилища, на простую HTML-страницу - PullRequest
Новая
       1

Как отобразить данные, извлеченные из локального хранилища, на простую HTML-страницу

0 голосов
/ 19 ноября 2018

Я пытаюсь сохранить данные на странице 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>

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Вы можете хранить в локальном хранилище одну запись, содержащую JSON-кодированный массив .Каждая запись в этом массиве должна иметь четыре значения, которые вас интересуют. Поэтому в один конкретный момент одна запись 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 на ваших существующих страницах:

  1. 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)));
}

  2. 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]
        );
    );
};
0 голосов
/ 19 ноября 2018

Из вашего кода я понимаю, что вы переопределяете свои существующие данные предыдущими данными, вместо этого устанавливая значение для одного ключа в локальном хранилище, создавайте локально с копией предыдущих данных и добавляйте новые данные в нее всякий раз, когда вы отправляете в этом В этом случае вы можете отправить несколько форм и отобразить их в таблице. 

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 )

Затем вы можете зациклить массив в таблице, чтобы получить таблицу с данными из локального хранилища

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...