Імпорт CSV-файлу в LocalStorage за допомогою чистого JavaScript

4 Березня 2024 в 14:58 27

Один із поширених завдань у розробці веб-додатків – це імпорт даних із CSV-файлів та їх збереження в LocalStorage. У цій статті ми розглянемо, як це можна виконати, використовуючи лише чистий JavaScript.

Отримання файлу

html


Для початку створимо поле вводу, де користувач може вибрати локальний CSV-файл.
Обробка файлу за допомогою FileReader API
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.
Збереження у LocalStorage
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.