Why doesn't localstorage show me the current version?

General
1

I would like to create a field where the user can write something. As soon as you press the “Speichern” button, the text should no longer be editable. Only possible again with the “Bearbeiten” button. I always want to save the current result in the LocalStorage. However, it always shows me the text of the “Speichern” button. As soon as I change the text and press reload, it is deleted and the first/old result is displayed again. Does anyone have an idea how I could solve this? I’ve tried so many different variations, but I can’t get the result I want.

function fixTextarea() {
  let textArea_ = document.getElementById("textarea");
  let speichernFix = document.getElementById("speichern");
  let bearbeitenFix = document.getElementById("bearbeiten");

  // Event listener for saving
  speichernFix.addEventListener("click", function() {
    textArea_.setAttribute("readonly", true);
    textArea_.style.outline = "1px solid green";
    textArea_.style.border = "none";
    localStorage.setItem("textareaContent", textArea_.value); // Inhalt speichern
  });

  // Event listener for editing
  bearbeitenFix.addEventListener("click", function() {
    textArea_.removeAttribute("readonly");
    textArea_.style.outline = "1px solid green";
  });

  // Retrieve and play content from localStorage
  if (localStorage.getItem("textareaContent")) {
    textArea_.value = localStorage.getItem("textareaContent");
  }
}


document.addEventListener("DOMContentLoaded", fixTextarea);

<div class="roth_allgemein">
  <h2>Notizen</h2>
  <div class="Notizen">
    <textarea id="textarea"></textarea>
  </div>
  <button class="Absenden" id="speichern" onclick="fixTextarea()"><b>Speichern</b></button>
  <button class="Absenden" id="bearbeiten" onclick="fixTextarea()"><b>Bearbeiten</b></button>
</div>
<script src="test.js"></script>
2

JavaScript

function fixTextarea() {
  let textArea_ = document.getElementById("textarea");
  let speichernFix = document.getElementById("speichern");
  let bearbeitenFix = document.getElementById("bearbeiten");

  // Event listener for saving
  speichernFix.addEventListener("click", function() {
    textArea_.setAttribute("readonly", true);
    textArea_.style.outline = "1px solid green";
    textArea_.style.border = "none";
    localStorage.setItem("textareaContent", textArea_.value); // Inhalt speichern
  });

  // Event listener for editing
  bearbeitenFix.addEventListener("click", function() {
    textArea_.removeAttribute("readonly");
    textArea_.style.outline = "1px solid green";
  });

  // Retrieve and play content from localStorage
  if (localStorage.getItem("textareaContent")) {
    textArea_.value = localStorage.getItem("textareaContent");
  }
}

// Call fixTextarea() only once on DOMContentLoaded
document.addEventListener("DOMContentLoaded", fixTextarea);

Changes:

  • Removed the onclick attributes from the buttons.
  • Called fixTextarea only once on DOMContentLoaded to initialize the event listeners and load the saved content.

This ensures that the fixTextarea function is called only when the page is initially loaded, preventing unnecessary resets. The buttons will now function as expected, saving and editing the text content without resetting it on every click.