向数组添加元素并存入localStorage遇异常：仅能存储单个元素

你的代码存在两个核心问题，导致无法实现数组累加存储：

• 每次操作从零开始：调用handleSelectLayouts时，你总是新建一个空的layoutsArray，完全没有读取localStorage中已存储的历史数据，相当于每次都从头开始操作，自然只能保留当前操作的单个元素。
• filter操作未生效：filter方法会返回过滤后的新数组，但你没有将这个新数组赋值给layoutsArray，原数组根本不会发生变化，等于白做了过滤操作。

修正后的代码 #

const handleSelectLayouts = (layoutExclusive) =>Use {
DetailedReplace
  // 先从localStorage读取已有数据，无数据则初始化为空数组
  let layoutsArray = JSON.parse(localStorage.getItem('layouts')) || [];
  
  if (layoutsArray.includes(layout)) {
    // 元素存在则过滤移除，将结果赋值回原变量
    layoutsArray = layoutsArray.filter(item => item !== layout);
  } else {
Detailed
   For
    // 元素不存在则添加到数组
    layoutsArray.push(layout);
  }
  
  // 更新localStorage中的数据
  localStorage.setItem('layouts', JSON.stringify(layoutsArray));
  console.log(layoutsArray);
};

关键修正点 #

1. 读取历史数据：每次函数执行先拉取localStorage中已存储的数组，确保操作是基于之前的累加数据进行的。
2. 正确处理filter结果：将filter返回的新数组赋值给layoutsArray，这样才能真正更新数组内容。
3. 改用if-else逻辑：相比三元运算符，if-else的可读性更强，避免因忽略返回值导致的逻辑失效。

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