如何将元素添加到数组，然后将数组的新值添加到localStorage？

Question

我正在尝试创建一个管理面板，在其中将单词添加到输入中，然后将这些单词添加到一个数组中，该数组将更新他的值并将其添加到localStorage。

我试图将事件监听器添加到按钮，但是当我第一次单击它时，它会添加值，但是当我第二次单击它时，它会添加相同的值。

let input = document.querySelector('.word-input');
let inputValue = input.value;
let btn = document.querySelector('.btn');
let p1 = document.querySelector('#p2');
let form = document.querySelector('form')[0];


form.addEventListener('submit', function() {
    arr.push(inputValue);

})

localStorage.setItem('a', arr);

我希望插入到输入中的值也会插入到localStorage中，但是每次都会添加相同的值。

Answer 1

它一直插入相同的值，因为您创建了let inputValue = input.value; 但是您应该在每次事件触发时获取输入值。

此外，由于要将值添加到数组中，然后将数组保存到localStorage中，因此应将localStorage.setItem放入事件中。

最后，由于无法将数组保存到localStorage中，因此应对数组进行字符串化以将其另存为字符串。

form.addEventListener('submit', function() {
    arr.push(input.value);
    localStorage.setItem('a', JSON.stringify(arr));
})

Answer 2

您的inputValue变量仅在初始加载时设置。

form.addEventListener('submit', function() {
    let inputValue = input.value;
    arr.push(inputValue);
})```