增加localStorage对象名称以存储来自输入的数据

Question

这仅用于测试目的。

我正在尝试存储来自3个输入（类型:text、number）的数据，并将它们存储在localstorage中。每次提交都会连续递增。

我似乎在第二次提交时覆盖value0、value1、value2，而不是进一步增加到value3、value4、value5。

预期结果：

1. 首先提交value0、value1、value2
2. 第二次提交value3、value4、value5
3. 第三次提交value6、value7、value8等

JS：

document.getElementById('btn').addEventListener('click', createEntry());

function createEntry(){
    const inputs = document.getElementsByTagName("input");

    let i;
    for (i = 0; i < inputs.length; i++) {
        let value = inputs[i].value; 

        localStorage.setItem(`value${i}`, JSON.stringify(value));

    }  
};

通过抓取所有输入标记来收集所有输入，循环找到的元素。将new语句赋给循环值并将其存储在localstorage中。增加项名以避免覆盖以前循环的项。

HTML：

<div class="form">
      <input type="text" required>
      <input type="text" required>
      <input type="number" min="1" max="120" required>
      <button type="button" id="btn">Add</button>
</div>

Answer 1

您的编码方式将覆盖保存的值，因为i在函数运行时总是被重置为0。有许多不同的方法可以重写代码，下面是一种：

存储上次使用的索引

// By the way, there was an error in this line, you were calling createEntry()
// instead of passing the function as a callback.
document.getElementById('btn').addEventListener('click', createEntry);

function createEntry() {
    const inputs = document.getElementsByTagName("input");

    let i;
    let index = getNextIndex();

    for (i = 0; i < inputs.length; i++) {
        let value = inputs[i].value; 
        localStorage.setItem(`value${index}`, JSON.stringify(value));
        index++;
    }

    localStorage.setItem('nextIndex', index);
}

function getNextIndex() {
    const index = localStorage.getItem('nextIndex');
    return index ? parseInt(index) : 0;
}