在会话存储中使用数组保存表单数据答案

【问题标题】：Saving Form Data with an Array in Session Storage在会话存储中使用数组保存表单数据
【发布时间】：2020-10-20 02:07:20
【问题描述】：

我是 JavaScript 新手。我要解决的一个挑战是将数据从表单保存到会话存储中。为此，我选择了一个事件列表器，因此每次单击添加按钮都会将输入数据推送到数组中。但在 Session Storge 中不会存储任何内容。有时数组的值为 null，有时没有显示键/值。我尝试使用两个输入字段进行数据传输。我的第一次测试中不涉及选择选项（但它们也应该被存储）。这是我的代码：

const input = document.querySelectorAll('.formData')
const btnSubmit = document.querySelector('.pushData')

let inputData

if(sessionStorage.getItem('formdata'))
{
    inputData = JSON.parse(sessionStorage.getItem('formdata'))
} else {
    inputData = []
}

input.forEach(btnSubmit => {
    btnSubmit.addEventListener('click', () => {
        inputData.push(input.value)
        sessionStorage.setItem('formdata', JSON.stringify(inputData))
    })
})

<label for="message-text" class="col-form-label">Aufgabe:</label>
<input class="form-control formData" name="task" type="text" required>
                  
<label for="recipient-name" class="col-form-label">Ticket-ID:</label>
<input class="form-control formData" name="ticketid" type="number" required>
                
<label for="message-text" class="col-form-label">Wochentag:</label>
<select id="day" class="formData" name="day">
    <option value="1">Montag</option>
    <option value="2">Dienstag</option>
    <option value="3">Mittwoch</option>
    <option value="4">Donnerstag</option>
    <option value="5">Freitag</option>
</select>

如果你们中的任何人能帮助我，那就太麻烦了。

【问题讨论】：

标签： javascript arrays session storage

【解决方案1】：

您错误地访问了“价值”。

您的变量“输入”是一个长度为 3 的 nodeList 数组。正确的方法->

input[0].value
input[1].value
input[2].value

【讨论】：

感谢您的建议@Anshul。我认为这是初学者的错误。我使用以下代码存储数据：inputData.push(input[i].value)

【解决方案2】：

您的按钮事件侦听器包含在 for each 中，它每次都会尝试附加一个新的事件侦听器。您可以反转它并将您的 forEach 放入事件侦听器中：

 btnSubmit.addEventListener('click', () => {
            input.forEach(addItem);
        })
    
    function addItem(item) {
     inputData.push(item.value)
    }
    sessionStorage.setItem('formdata', JSON.stringify(inputData))

【讨论】：