VueJS 3: Wie kann ich To-Do's in einer Datei speichern?

Hallo,

ich habe eine Frage.

Momentan programmiere ich eine To-Do-App mit Vue.js 3, JavaScript, HTML und CSS. Bis jetzt funktioniert alles, ich kann neue To-Dos erstellen, bearbeiten und löschen. Aktuell sind alle To-Dos im LocalStorage gespeichert, aber ich möchte sie lieber in einer Datei speichern.

Ich bin noch neu in den genannten Programmiersprachen. Trotzdem könnte ich mir vorstellen, dass ich eine Datei erstellen muss, z.B. todos.json, in der die neuen To-Do's gespeichert werden. Ich stelle mir vor, dass es etwa so in der todos.json-Datei aussehen könnte:

{
  id: 1,
  label: "todo1",
  highPriority: false,
  finished: true,
  editing: false
},
{
  id: 2,
  label: "todo2",
  highPriority: true,
  finished: true,
  editing: false
},

Um auf den Punkt zu kommen: Ich benötige Hilfe dabei, wie ich dies umsetzen muss, da ich momentan nicht weiß, was ich tun soll.

Am Ende soll natürlich auch die Applikation aus der Datei die verschiedenen To-Do's herauslesen können und diese dann in der <li>-Liste anzeigen können.

Answer 1

[regex9]

Innerhalb des Browsers hat JavaScript nur eingeschränkte Rechte, das betrifft insbesondere den Zugriff auf das Dateisystem des Nutzers.

Was du nur mit JS/Vue im Browser machen kannst:

• Die Daten in den Web Storage oder einen Cookie schreiben
• Ein BLOB-Objekt erstellen, welches dem Nutzer zur Speicherung vorgeschlagen wird; ungefähr so:

const jsonData = JSON.stringify(data);
const blob = new Blob([jsonData], { type: "text/plain" });

const downloadLink = document.createElement("a");
downloadLink.download = "data.json";
downloadLink.href = window.URL.createObjectURL(blob);

downloadLink.click();

Das Lesen der Datei würde mit einem FileReader klappen. Auch in diesem Fall müsste der Nutzer erst aktiv werden, indem er die Datei für ein Eingabefeld auswählt.

Wenn dir diese Optionen nicht zusagen, müsstest du die Speicherung serverseitig vornehmen. Du kannst dir mit Node.js und Express relativ leicht einen Webserver aufsetzen und dem dann via AJAX-Request die Daten herüberschicken.

Der Request könnte so aussehen:

fetch("/save", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
})
.then(response => console.log(response.status));

und so der Request Handler:

const express = require("express");
const fs = require("fs");
const app = express();

app.post("/save", (request, response) => {
  const filePath = __dirname + "data.json";
  const newEntry = JSON.parse(request.body);
  fs.readFile(filePath, "utf8", { flag: "a+" }, (error, data) => {
    if (error) {
      console.log(error);
      return;
    }

    let entries;

    try {
      entries = JSON.parse(data);
    }
    catch (ex) {
      entries = [];
    }

    entries.push(newEntry);
    const json = JSON.stringify(entries);
    fs.writeFile(filePath, json, "utf8", () => {
      response.send("success");
    });
  });
});

Eine Validation der Daten, die vom Browser geschickt werden, ist hierbei noch nicht eingebaut. Darum müsstest du dich selbst kümmern.