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

Question

我必须导入保存在 .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 元素，我需要转到本地存储。

这是完整的代码：

<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>

Answer 1

将

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)

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

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

1个回答

最新问题

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

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

1个回答

最新问题

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