为什么foreach覆盖值而不是返回所有值[重复]答案

【问题标题】：why foreach over writing the value instead of return all values [duplicate]为什么foreach覆盖值而不是返回所有值[重复]
【发布时间】：2021-08-10 21:01:56
【问题描述】：

以下是创建dom时需要存储在本地存储中的数组。

  this.headers.push( 
   {
      text: "Name",
      align: "center",
      sortable: true,
      value: "name",
      align: "start",
    },
    {
      text: "Company",
      align: "center",
      sortable: true,
      value: "company",
      align: "start",
    },
    {
      text: "Phone",
      align: "center",
      sortable: true,
      value: "phone",
      align: "start",
    },
   )]

每个对象的值都需要存储在 localstorage 中，键名为 el_columns。所以我尝试如下。

   this.headersList.forEach((element) => {
      localStorage.setItem(
        "el_columns",
        JSON.stringify(element.value)
      );
    });

上面的代码工作正常，但只存储一个值，即最后一个对象值phone。我期望的输出如下['name', 'company', 'phone']

【问题讨论】：

它不是存储一个值，而是覆盖之前存储的值。
那么我怎样才能停止写入并存储所有值
使用map 获取values 的数组。不需要 forEach：JSON.stringify(this.headers.map(h => h.value))
你是如何获得本地存储的？

标签： javascript arrays vue.js vuejs2 local-storage

【解决方案1】：

试试这个

 this.headersList.forEach((element) => {
      localStorage.setItem(
        "el_columns_"+element.text,
        JSON.stringify(element.value)
      );
    });

【讨论】：

未解决。它为每个对象创建单独的键值。
试试 localStorage.setItem("el_columns_", JSON.stringify(this.headers));
` let result = obj.map((col) => col.value);` 这是我找到的工作代码