React中如何将用户输入追加到localStorage指定key对应的数组中

• 你最初直接存储单个输入值的写法本身就是覆盖式写入，自然不会保留旧数据
• 后续尝试的代码每次执行都会声明空数组arr，没有读取localStorage中已存储的历史数据，所以每次存储的数组都只包含当前最新输入值，还是会覆盖旧内容

实现逻辑 #

1. 先读取localStorage中已存储的数组，若之前没有存储过则初始化为空数组
2. 将新的输入值追加到读取到的数组末尾
3. 把更新后的数组序列化后重新存入localStorage

可用代码示例 #

// 读取已有存储数据，兼容未初始化的场景
const existingData = JSON.parse(localStorage.getItem('Inputs')) || [];
// 获取当前输入值
const currentVal = document.getElementById('inputVal').value;
// 追加新值到数组
existingData.push(currentVal);
// 将更新后的数组存回localStorage
localStorage.setItem('Inputs', JSON.stringify(existingData));

appendChild()是DOM操作API，仅用于向HTML页面的DOM节点中插入子元素，和localStorage本地存储没有任何关联，不能用来实现存储数据追加的需求。

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