Ich entwickle eine Notiz App für den Browser (Javascript LocalStorage Anleitung)

Habt ihr gewusst, dass jeder Browser auch eine Art Datenbank eingebaut hat, den man als Webseitenbetreiber auch verwenden könnt? Ja man muss nicht nur alles in Cookies einbauen, sondern könnte gewisse Dinge auch in diesen Zwischenspeicher einbauen.

Damit ihr seht wie das ganze mit Javascript funktioniert, programmiere ich mit euch gemeinsam eine Notiz-App die ihr dann selbst nachbauen und verwenden könnt.

Video

HTML

<div class="container">
      <h2>Notizen</h2>
      <div id="app">
        <button class="add-note" type="button">+</button>
      </div>
      <button id="clearbutton">Clear</button>
    </div>

CSS

body {
  margin: 0;
  background: #00a896;
}

.container {
  text-align: center;
}

h2 {
  color: #f0f3bd;
}

#app {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  padding: 24px;
  gap: 24px;
}

.note {
  height: 200px;
  box-sizing: border-box;
  padding: 16px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
  resize: none;
  font-family: sans-serif;
  font-size: 16px;
  background-color: #f0f3bd;
}

.add-note {
  height: 200px;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 120px;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 0.2s;
}

.add-note:hover {
  background: rgba(0, 0, 0, 0.2);
}

#clearbutton {
  width: 100px;
  height: 50px;
  background: #028090;
  color: #f0f3bd;
  border: none;
}
#clearbutton:hover {
  background: #05668d;
  color: #fff;
}

Javascript

const notesContainer = document.getElementById("app");
const addNoteButton = notesContainer.querySelector(".add-note");

getNotes().forEach((note) => {
  const noteElement = createNoteElement(note.id, note.content);
  notesContainer.insertBefore(noteElement, addNoteButton);
});

addNoteButton.addEventListener("click", () => addNote());

function getNotes() {
  return JSON.parse(localStorage.getItem("database") || "[]");
}

function saveNotes(notes) {
  localStorage.setItem("database", JSON.stringify(notes));
}

function createNoteElement(id, content) {
  const element = document.createElement("textarea");

  element.classList.add("note");
  element.value = content;
  element.placeholder = "leere Notiz";

  element.addEventListener("change", () => {
    updateNote(id, element.value);
  });

  element.addEventListener("dblclick", () => {
    const doDelete = confirm("Löschen?");

    if (doDelete) {
      deleteNote(id, element);
    }
  });

  return element;
}

function addNote() {
  const notes = getNotes();
  const noteObject = {
    id: Math.floor(Math.random() * 100000),
    content: "",
  };

  const noteElement = createNoteElement(noteObject.id, noteObject.content);
  notesContainer.insertBefore(noteElement, addNoteButton);

  notes.push(noteObject);
  saveNotes(notes);
}

function updateNote(id, newContent) {
  const notes = getNotes();
  const targetNote = notes.filter((note) => note.id == id)[0];

  targetNote.content = newContent;
  saveNotes(notes);
}

function deleteNote(id, element) {
  const notes = getNotes().filter((note) => note.id != id);

  saveNotes(notes);
  notesContainer.removeChild(element);
}

const clearButton = document.getElementById("clearbutton");

clearButton.addEventListener("click", () => {
  localStorage.removeItem("database");
  location.reload();
});