将所有用户输入存储到本地存储中答案

【问题标题】：Store ALL user input onto Local-Storage将所有用户输入存储到本地存储中
【发布时间】：2020-06-06 08:51:47
【问题描述】：

我目前正在处理表单并将数据保存在本地存储中。

我的表格是->

<form id="formy">
<input class="add" id="num1">
<select class="add" id"num2">
 <option value="act1"> Try </option>
 <option value="act2"> Try2 </option>
<input class="add" id="num3">
<input class="add" id="num4">
</form>

我有 3 个输入和 1 个选择，我能够存储第一个输入，我想存储在数组中 [“嗨”、“Try2”、“LoveCode”、“LY”]

但我只得到 ["Hi"] 仅存储的第一个输入。

这里是js代码

const myForm = document.getElementById("formy");

    myForm.addEventListener("submit", addTodo);


function addTodo(e) {
        e.preventDefault();
        const userInput = document.querySelector("add").value;
        const userListItem = document.createElement("li");
        userListItem.appendChild(document.createTextNode(userInput));
        list.appendChild(userListItem);
        const myArray = map(listItems, getText);
        localStorage.setItem('titols', JSON.stringify(myArray));
    }

    const listItems = document.getElementsByTagName('li');


    function map(arrayLike, fn) {
        var ret = [], i = -1, len = arrayLike.length;
        while (++i < len) ret[i] = fn(arrayLike[i]);
        return ret;
    }

【问题讨论】：

我认为问题可能会解决到 const userInput = document.querySelector("add").value; 因为它可能只选择第一个，如果我做了 4 consts 每个输入都有一个？

标签： javascript html forms web local-storage

【解决方案1】：

您需要知道的第一件事是，当您使用 document.querySelector("add") 时，您正在寻找一个名为“add”的元素，如果您想获得一个名为“add”的元素，您应该如果要使用其 id 获取元素，则在“.add”之前添加一个点，您应该在“#add”之前使用哈希。

关于 querySelector 你需要知道的另一件事是它只带第一个元素。为了解决这个问题，您可以使用 document.getElementsByClassName() 代替（请注意，在这里我们不需要添加点来获取具有相同类名的元素）。 “getElementsByClassName”将返回一个 HTMLCollection，我们可以使用 map 函数来解决这个问题，您的代码将是这样的：

function addTodo(e) {
    e.preventDefault();
    // const userInput = document.querySelector("add").value;
    const userInputHTMLCollection = document.getElementsByClassName('add');
    const userInput = [].map.call(userInputHTMLCollection, element => element.value);
    const userListItem = document.createElement("li");
    userListItem.appendChild(document.createTextNode(userInput));
    list.appendChild(userListItem);
    const myArray = map(listItems, getText);
    localStorage.setItem('titols', JSON.stringify(myArray));
}

你需要知道，如果你单独运行它，你会得到一个错误，因为'list'和'getText'是未定义的。无论如何，我希望我对你有所帮助。

【讨论】：

老板！！谢谢古斯塔沃！欣赏！

【解决方案2】：

这个函数：

const listItems = document.getElementsByTagName('li');

返回一个节点列表。为了映射，您需要将其转换为数组。

const listItems = Array.from(document.getElementsByTagName('li'));

【讨论】：