在本地存储中保存几个字符串

Question

我试图在本地存储中保存一些字符串，我试图这样做，但在本地存储中将未定义。

我向用户询问玩家的姓名，然后我想将其存储在本地存储中，以便再次使用。

以下是我正在尝试的：

const x = localStorage.getItem('playersNum');
const parentDiv = document.getElementById('player-list');
for (let i = 0; i < x; i++) {
const newInput = document.createElement("INPUT");
newInput.setAttribute("type", "text");
newInput.setAttribute("class", "form-control");
newInput.setAttribute("id", `player${i}`);
newInput.setAttribute("placeholder", "Player's Name");
parentDiv.appendChild(newInput);
}
//get all input elements of type text and starting id with player
const input = document.querySelectorAll("[type='text'][id^='player']");
const btn = document.getElementById('startGame');
btn.addEventListener('click', function() {
//reset border style of all input elements
[...input].forEach(el => el.style.border = '');
//get all empty input elements
let empty = [...input].filter(el => el.value.trim() == "");
//check length
if (empty.length) {
//show alert
// alert('Please fill in the players names');
//set border style to empty input elements
empty.forEach(el => el.style.border = '1px solid red');
}
else {
window.location.assign('game.html');
localStorage.setItem('playersNames', String(input.value));
}
});

Answer 1

您使用querySelectorAll声明输入，因此需要将输入读取为数组。

localStorage.setItem('playersNames', String(input[0].value));

然后，如果你想要所有玩家的名字，你需要遍历数组。此外，您需要获取localStorage的前一个值并将其附加到它，因为每次设置它时都会覆盖它

const input = document.querySelectorAll("[type='text'][id^='player']");
for (i=0; i < input.length; i++) {
var checkForStorage = localStorage.getItem('playersNames');
if (checkForStorage !== null) {
localStorage.setItem('playersNames', checkForStorage + ',' + String(input[i].value))  
} else {
localStorage.setItem('playersNames', String(input[i].value));
}
};