Question

我的任务是创建一个表单，无论何时提交，将其值保存在 localStorage 中，显示在相邻表格中发送的所有数据，保存每个提交的表单数据。

通过将每个值推送到其相应字段的所有值的数组并将其保存在localStorage中，我成功编写了代码。

我遇到的困难也是将增加的ID保存到localStorage。

即。第一个提交的表单的id为0，第二个的id为1，依此类推，所有表单都存储在localStorage中保存的ids数组中。

这是必需的，因此我有一个编辑/删除功能，可以使用每个表单的ID来工作。

感谢任何帮助，谢谢！

这是我的代码

//arrays of each data field
let firstnames = JSON.parse(localStorage.getItem('firstnames') || '[]');
let lastnames = JSON.parse(localStorage.getItem('lastnames') || '[]');
let ids = JSON.parse(localStorage.getItem('id') || '[]');

//array of all stored data
let data = JSON.stringify([firstnames, lastnames, ids]);

function validate() {
//retrieve all form elements
let fn = document.form.firstname;
let ln = document.form.lastname;
let p = document.getElementById('warn');

//validate entered data and check constraints
if (fn.value === "") {
    p.innerHTML = "Please enter your first name!";
    fn.focus();
    return false;
}
if (ln.value === "") {
    p.innerHTML = "Please enter your last name!";
    ln.focus();
    return false;
}
return true;
}

function* idMaker() {
let id = 1;
while (true) {
    yield id++;
}
}



window.onload = function () {

if (localStorage) { // Check for LocalStorage support.

    // Add an event listener for form submissions.
    document.getElementById('form').addEventListener('submit', function () {


        //placeholder paragraph division to warn the user that the form is 
incomplete.
        let p = document.getElementById("incomplete");

        if (validate() == true) {

            //retrieve form field values.
            let fname = document.getElementById('firstname').value;
            let lname = document.getElementById('lastname').value;

            let pid = idMaker();

            firstnames.push(fname);
            lastnames.push(lname);
            ids.push(JSON.stringify(pid.next().value));




            //store the entered data inside localStorage in JSON format.
            localStorage.setItem('firstnames', JSON.stringify(firstnames));
            localStorage.setItem('lastnames', JSON.stringify(lastnames));
            localStorage.setItem('id', JSON.stringify(ids));
        } else {
            p.innerHTML = "Please complete the form before submitting any data!";
        }
    });
}

//table that will show each individual form submission.
let posts = document.getElementById("posts");

//retrieve stored data and output it to the posts table.
let retFname = JSON.parse(localStorage.getItem('firstnames'));
let retLname = JSON.parse(localStorage.getItem('lastnames'));
let postID = JSON.parse(localStorage.getItem('id'));

for (let i = 0; i < firstnames.length; i++) {
    if (localStorage.getItem("firstnames") != null) {
        posts.insertAdjacentHTML('beforeend', '<tr><td>' + 'Name: ' + retFname[i] + ' ' + retLname[i] + '</td><td><button type="button" onclick="editOrDelete(' + postID[i] + ')">Edit/Delete</button></td></tr>');
    } else {
        posts.insertAdjacentHTML('beforeend', 'Nothing yet!');
    }
}

}

Answer 1

您可以尝试在数组中的每个对象中实现自动增量id，并引用以下代码。在我的代码中，我在HTML中使用了'name'，'address'和'phone'输入字段，这些字段具有id'name'，'address'和'phone'。表单有一个id'形式'。我使用'storedValues'作为存储数据的名称。

document.getElementById('form').addEventListener('submit', callFuntion);


function callFuntion() {
    let obj = {
        name: document.getElementById('name').value,
        address: document.getElementById('address').value,
        phone: document.getElementById('phone').value
    };
    let array = localStorage.getItem('storedValues') ? JSON.parse(localStorage.getItem('storedValues')) : [];
    obj.id = array.length;  //if first submit, it gives id = 0 as array is empty, if second, it gives id = 1 as array with one element is pushed in local storage
    array.push(obj);
    localStorage.setItem('storedValues', JSON.stringify(array));
}

每次提交表单时，如何将属于每个表单帖子的变量ID添加到localStorage？

1 个答案: