求助：将用户输入数组存入localStorage失败，空数组及forEach报错问题

核心问题分析 #

1. 输入值获取错误
   document.getElementsByClassName('ex')返回的是HTML元素集合，不是单个输入框，直接读取value会得到undefined。而且输入框默认值是空格，需要去除首尾空白避免无效内容。

2. localStorage存储顺序颠倒
   当前代码先将数组存入localStorage，再往数组里添加新元素，导致新元素从未被保存，localStorage永远是空数组。正确顺序应该是先添加元素，再存储。

3. 页面初始化未处理null值
   页面加载时，localStorage中items3可能不存在，JSON.parse会返回null，直接调用forEach会触发无法读取null的forEach属性错误，需要给默认空数组。

修复后的代码 #

HTML（建议避免id与class同名，优化原结构）

<form action="index.php">
    <input type="text" value="" class="ex">
    <button id="addBtn">add item</button>
</form>

JavaScript

const items2 = document.querySelector('form');
items2.addEventListener('submit', function(ev) {
    // 正确获取输入框的值并去除首尾空白
    const items1 = document.getElementsByClassName('ex')[0].value.trim();
    if (!items1) { // 空输入直接拦截
        alert('请输入内容');
        ev.preventDefault();
        return;
    }

    let items3;
    if (localStorage.getItem('items3') === null) {
        items3 = [];
    } else {
        items3 = JSON.parse(localStorage.getItem('items3'));
    }

    // 先添加新元素，再存入localStorage
    items3.push(items1);
    localStorage.setItem('items3', JSON.stringify(items3));

    alert('submit');
    ev.preventDefault();
});

// 初始化时处理null情况，给默认空数组
const items3 = JSON.parse(localStorage.getItem('items3')) || [];
items3.forEach(function(item) {
    console.log(item);
});

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