local storage auch bei Veränderungen aktuell halten

[alicie232]

Hallo!

Ich speichere aktuell die Todos im local storage, damit der User den Stand seiner Aufgaben (erledigt/nicht erledigt) auch nach dem aktualisieren oder neu öffnen der Website zur Verfügung hat.

Mit dem neuen Feature, dass der User automatisch seine täglichen und zum Wochentag passenden Aufgaben angezeigt bekommt funktioniert der local storage wie vorher verwendet nicht mehr, da die Seite auf Grund des local storage trotzdem noch die Aufgaben vom Vortag anzeigt. Ich muss den local storage händisch im Browser leeren um das gewünschte Object angezeigt zu bekommen.

localStorage.clear(); am neuen Tag würde mir ja alle gespeicherten Aufgaben löschen, was ich nicht möchte, da ich in Zukunft dem User eine Übersicht über seine in der laufenden Woche erledigten Aufgaben geben möchte.
Oder muss ich dafür schon über eine Datenbankanbindung nachdenken?

Die Funktion zum Anzeigen des jeweils richtigen Tages:

const todaysTodos = dailyTodos.filter(todo => todo.weekday === new Date().getDay() || todo.weekday === 'all');

localstorage.js

export const loadFromLocalStorage = key => {
  const value = localStorage.getItem(key);
  return JSON.parse(value);
};

export const writeToLocalStorage = (key, value) => {
  localStorage.setItem(key, JSON.stringify(value));
};

und nochmal die ganze DailyTasks.js

const [todos, setTodos] = useState(() => {
    const todosFromLocal = loadFromLocalStorage('todos');
    const uncheckedTodos = todosFromLocal?.map(todo => {
      if (todo.tasks !== undefined) {
        return {
          ...todo,
          tasks: todo.tasks.map(task =>
            task.checkedAt !== new Date().toLocaleDateString() ? {...task, isChecked: false, checkedAt: ''} : task
          ),
        };
      }
      return todo;
    });

    const todaysTodos = dailyTodos.filter(todo => todo.weekday === new Date().getDay() || todo.weekday === 'all');

    return uncheckedTodos ?? todaysTodos;
  });

  useEffect(() => {
    writeToLocalStorage('todos', todos);
  }, [todos]);

Das Schreiben in den local storage, so wie es aktuell ist, bereitet mir grundsätzlich Probleme, da ich bei Änderungen an der Website immer erstmal den local storage leeren muss, damit diese sichtbar werden.

Hier gehts zum aktuellen Pull Request.

Ich freue mich sehr über eure Vorschläge und bedanke mich für eure Zeit! :)

[actyvystom]

Hallo Alice,
Du kannst das localStorage prinzipiell genauso verwenden wie eine Datenbank. Mit Deinen beiden Funktionen loadFromLocalStorage und writeToLocalStorage bist Du schon auf dem richtigen Weg - Du könntest noch weitere Funktionen implementieren, mit denen Du dann z.B. nur für ein bestimmtes Datum die Todos aus dem localStorage holst.

[actyvystom]

Hi Alice,
Du hast über Deinen key todos immer nur ein Set bzw. Array von Todos im localStorage gespeichert, das tägliche Todos enthält (weekday: "all") und Todos für einen bestimmten Wochentag (zb. weekday: 4) - unabhängig vom tatsächlichen Datum. Hier liegt das Problem: Wenn Du nun Todos als done markierst und wieder im localStorage speicherst, sind diese ja auch schon für den nächsten Tag (im Fall von täglichen Todos) als erledigt markiert...

Eine Lösung wäre, die Todos mit dem aktuellen Datum als key zu speichern und bei jedem Auslesen des localStorage zu prüfen, ob der key noch dem aktuellen Datum entspricht - falls das nicht (mehr) zutrifft, legst Du wieder ein neues Set für das aktuelle Datum an und füllst es mit den Default-Werten für deine Todos. So würdest Du also immer nur die Todos verwenden und bearbeiten, die für das tatsächliche Datum relevant sind. Dabei müsstest Du allerdings irgendwann berücksichtigen, dass die Speicherkapazität des localStorage begrenzt ist (max. 5 MB).

Die bessere Alternative wäre, deine Todos in einer MongoDB zu speichern (auch mit dem aktuellen Datum als Kenner) und analog zum localStorage zu prüfen, ob es einen Datensatz für das aktuelle Datum gibt - falls nicht, den entsprechend anzulegen.