Один із поширених завдань у розробці веб-додатків – це імпорт даних із CSV-файлів та їх збереження в LocalStorage. У цій статті ми розглянемо, як це можна виконати, використовуючи лише чистий JavaScript.
html
Для початку створимо поле вводу, де користувач може вибрати локальний CSV-файл.
javascript
Copy code
let fileInput = document.getElementById("csv");
let readFile = function () {
var reader = new FileReader();
reader.onload = function () {
// Тут потрібно обробити та розібрати дані CSV
};
// Починаємо читання файлу
reader.readAsBinaryString(fileInput.files[0]);
};
fileInput.addEventListener('change', readFile);
Використовуючи API FileReader, ми створюємо можливість читання вмісту вибраного файлу. У функції onload можна виконати обробку та розібрати дані CSV.
javascript
Copy code
let CSV_DATA = []; // Припустимо, що тут буде збережено дані CSV
localStorage.setItem("csvData", JSON.stringify(CSV_DATA));
Отримавши дані з CSV, ми можемо зберегти їх у LocalStorage за допомогою localStorage.setItem().
Якщо виникають проблеми або помилки, такі як невизначеність csvData, переконайтеся, що ви правильно обробляєте асинхронний характер читання файлу. Також перевірте структуру даних CSV та їх розбір.
У вашому початковому коді я вніс деякі зміни та дав пояснення:
html
Copy code
Виберіть локальний CSV-файл:
Переконайтеся, що ви оброблюєте будь-яку подальшу обробку даних CSV всередині події onload FileReader.