JavaScript：向本地存储数组推送表单字段数据时出现空值问题

问题描述 #

我有一个关联本地存储的空数组，希望在表单提交时将表单字段的数据推送至该数组中。但提交按钮点击后，控制台显示数组从[]变为空字符串""，而非表单中输入的文本。

原HTML代码 #

<form id="player-name-form">
    <input
    class="input"
    type="text"
    placeholder="player 1"
    id="player1"
    required
    maxlength="50"
    >
    <button id="confirm-player-1" type="submit" onclick="formBtnClick()" >confirm player 1</button>
</form>

原JavaScript代码 #

// Setting player names to local storage
let playerNames = [];
let form = document.getElementById('player-name-form');
let formBtn = document.getElementById('confirm-player-1');
this.name = form.player1.value;
localStorage.setItem("playerNames", JSON.stringify(playerNames));

// Adding form input to local storage
function formBtnClick () {
 event.preventDefault()
localStorage.setItem("playerNames", JSON.stringify(this.name));
} 

错误原因分析 #

• 初始化阶段直接执行this.name = form.player1.value，此时输入框为空，this.name被赋值为空字符串，且this指向全局对象（浏览器环境下为window），逻辑完全错误。
• 提交函数未处理数组推送逻辑，直接把初始化时的空字符串存入localStorage，完全忽略用户输入的最新值。
• 未从localStorage读取已保存的数组，页面刷新后之前的数据会丢失。

修正方案 #

步骤说明 #

1. 初始化时优先从localStorage读取已有的playerNames数组，不存在则设为空数组，保证数据持久化。
2. 提交函数内实时获取输入框的当前值，避免使用初始化时的旧值。
3. 将新输入的值push到数组后，再把整个数组转成JSON存入localStorage。
4. 避免使用全局this，直接通过DOM元素获取输入值，代码更清晰可控。

修正后的JavaScript代码 #

// 初始化：从localStorage读取已有数据，无数据则设为空数组
let playerNames = JSON.parse(localStorage.getItem("playerNames")) || [];
let playerInput = document.getElementById('player1');

// 表单提交处理函数
function formBtnClick(event) {
    event.preventDefault();
    // 获取输入框当前值并去除首尾空格
    const newName = playerInput.value.trim();
    if (newName) { // 非空才添加
        playerNames.push(newName);
        // 将更新后的数组存入localStorage
        localStorage.setItem("playerNames", JSON.stringify(playerNames));
        // 清空输入框（可选操作）
        playerInput.value = '';
        // 控制台验证存储结果
        console.log('当前存储的玩家数组:', playerNames);
    }
}

内容的提问来源于stack exchange，提问作者7766633