如何将CSV数据以数组形式导入localStorage并处理浮点数？

问题描述 #

我希望将CSV数据以数组而非对象的形式导入localStorage，目前使用以下代码通过FileReader读取CSV文件并尝试用JSON.stringify存入localStorage，目标是替换或更新现有localStorage数据：

const fileInput = document.getElementById('csv');

const readFile = () => {
  const reader = new FileReader();
  
  reader.onload = () => {
    localStorage.setItem("entry_list", JSON.stringify(reader.result));
  }
  reader.readAsArrayBuffer(fileInput.files[0]);
};

fileInput.addEventListener('change', readFile);

我认为当前问题是数据被以对象形式导入，请问该如何解决？

补充说明：经帮助已解决大部分问题，但仍有一个数组元素需以浮点数格式存储（不带引号），请问是否可以实现及如何处理？

解决方案 #

1. 将CSV解析为数组存入localStorage #

你当前代码直接把ArrayBuffer的原始结果转成字符串存储，并没有完成CSV到数组的解析。正确的做法是先把ArrayBuffer转成文本，再按CSV规则拆分出数组：

const fileInput = document.getElementById('csv');

const readFile = () => {
  const reader = new FileReader();
  
  reader.onload = () => {
    // 将ArrayBuffer解码为UTF-8文本
    const csvText = new TextDecoder('utf-8').decode(reader.result);
    // 按换行拆分每行，再按逗号拆分单元格（适用于无嵌套逗号的简单CSV）
    const csvArray = csvText.split('\n').map(row => row.split(','));
    // 存入localStorage
    localStorage.setItem("entry_list", JSON.stringify(csvArray));
  };
  
  reader.readAsArrayBuffer(fileInput.files[0]);
};

fileInput.addEventListener('change', readFile);

注意：如果CSV包含带逗号的单元格（比如用双引号包裹的内容），上述简单拆分逻辑会出错，这种情况需要更严谨的解析逻辑处理。

2. 将指定元素转换为浮点数 #

要让数组中指定位置的元素以浮点数类型存储，只需在解析每行时对目标单元格做类型转换即可。假设要把每行的第2个元素（索引为1）转成浮点数：

const fileInput = document.getElementById('csv');

const readFile = () => {
  const reader = new FileReader();
  
  reader.onload = () => {
    const csvText = new TextDecoder('utf-8').decode(reader.result);
    const csvArray = csvText.split('\n').map(row => {
      const cells = row.split(',');
      // 目标元素索引，可根据实际需求修改
      const targetIndex = 1;
      // 尝试转换为浮点数，转换失败则保留原内容
      const num = parseFloat(cells[targetIndex]);
      cells[targetIndex] = isNaN(num) ? cells[targetIndex] : num;
      return cells;
    });
    localStorage.setItem("entry_list", JSON.stringify(csvArray));
  };
  
  reader.readAsArrayBuffer(fileInput.files[0]);
};

fileInput.addEventListener('change', readFile);

这样存入localStorage的数组中，指定位置的元素会是浮点数类型（不带引号），其他元素保持字符串类型；若目标单元格无法转换为数字，会保留原内容避免出错。

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