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);
})```

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

2 个答案: