如何使用 Vanillia JS 将 CSV 文件导入本地存储

问题描述 投票:0回答:1

我必须导入保存在 .csv 文件中的数据,然后将其保存到本地存储。

我之前编写了一个将日期导出到 .csv 的脚本,现在我必须执行相反的操作。

我知道我需要执行以下操作:

  • 获取文件
  • 将文件解析为 blob
  • 保存到本地存储

我尝试过以下方法:

  • 获取文件

    <input id="csv" type="file">
    有效!

  • 将文件解析成一个blob或对象,我认为......

    let csvData = [];
    let csvData = fileInput.addEventListener('change', readFile);
    不起作用!当我
    console.log(csvData);
    .

    时,我收到 csvData 未定义错误。
  • 保存到本地存储

    let csvData = [];
    localStorage.setItem("csvData", JSON.stringify(CSV_DATA));
    有效!

任何人都可以看到我做错了什么或遗漏了什么吗?也许它是错误类型的对象。我仍在学习,所以如果很明显,我很抱歉。

我确实进行了搜索,但没有一个示例适用于普通 JS。

代码非常脱节,因为我很烂,哈哈,不过说真的,我正在尝试从我在另一个问题中找到的示例重建代码。我尝试破解的代码旨在将输出打印为 HTML 元素,我需要转到 localstorage

这是完整的代码:

<body>
  <p>Select local CSV File:</p>
  <input id="csv" type="file">

  <script>
  var fileInput = document.getElementById("csv"),

  readFile = function () {
      var reader = new FileReader();
      reader.onload = function () {
          document.getElementById('out').innerHTML = reader.result;
      };
      // start reading the file. When it is done, calls the onload event defined above.
      reader.readAsBinaryString(fileInput.files[0]);
  };

let csvData = [];
let csvData = fileInput.addEventListener('change', readFile);

let CSV_DATA[];
localStorage.setItem("csvData", JSON.stringify(CSV_DATA));

  </script>
</body>
javascript csv parsing import local-storage
1个回答
0
投票

localStorage.setItem("csvData", JSON.stringify(CSV_DATA));
移至 readFile 函数内。

const fileInput = document.getElementById('csv')


const readFile = () => {
  const reader = new FileReader()
  
  reader.onload = () => {
    
    document.getElementById('out').innerHTML = reader.result;
    localStorage.setItem("csvData", JSON.stringify(reader.result));
  }

  reader.readAsBinaryString(fileInput.files[0])
}

fileInput.addEventListener('change', readFile)
© www.soinside.com 2019 - 2024. All rights reserved.