Question 275787 in Html Question posted in
Some basic documentation can be found here.

Html – localstorage not getting saved to

I have a simple text editor and when I try and save to localstorage it works if I refresh the page but if I clear the text then refresh and click load from storage it won’t work.
here is my code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Editor</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background-color: #000;
    }

    div {
      text-align: center;
      background-color: #000;
    }

    h1 {
      color: #fff;
      font-size: 36px;
      margin-top: 30px;
    }

    textarea {
      width: 80%;
      height: 200px;
      margin: 20px auto;
      font-size: 16px;
      padding: 10px;
      border: 2px solid #fff;
      border-radius: 5px;
      color: #fff;
      background-color: #000;
    }

    button {
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      margin-right: 10px;
    }

    #downloadBtn,
    #clearStorageBtn,
    #loadStorageBtn,
    #toggleThemeBtn,
    #printBtn,
    #fullscreenBtn {
      background: #4CAF50;
      color: #fff;
    }

    #discardBtn,
    #clearTextBtn {
      background: #f44336;
      color: #fff;
    }

    #footer {
      background-color: #333;
      color: #fff;
      padding: 20px 0;
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
    }

    #emailLink {
      color: #fff;
      text-decoration: underline;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="container">
    <h1>Text Editor</h1>
    <textarea id="editor" placeholder="Type your text here..."></textarea>
    <br>
    <button id="downloadBtn" onclick="downloadText()">Download</button>
    <button id="discardBtn" onclick="discardText()">Discard</button>
    <button id="clearTextBtn" onclick="clearText()">Clear Text</button>
    <button id="saveBtn" onclick="saveTextManually()">Save</button>
    <button id="clearStorageBtn" onclick="clearLocalStorage()">Clear Storage</button>
    <button id="loadStorageBtn" onclick="loadFromLocalStorage()">Load from Storage</button>
    <button id="toggleThemeBtn" onclick="toggleTheme()">Toggle Theme</button>
    <button id="printBtn" onclick="printText()">Print</button>
    <button id="fullscreenBtn" onclick="toggleFullscreen()">Fullscreen</button>
  </div>

  <div id="footer">
    <a id="emailLink" href="https://mail.google.com/mail/?view=cm&fs=1&[email protected] target="_blank">Contact
      us</a>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Load text from local storage on page load
      loadFromLocalStorage();
  
      // Add event listener for input changes
      document.querySelector('#editor').addEventListener('input', handleInput);
  
      // Add event listener for the "Save" button
      document.querySelector('#saveBtn').addEventListener('click', saveTextManually);
  
      // Add event listener for the "Load from Storage" button
      document.querySelector('#loadStorageBtn').addEventListener('click', loadFromLocalStorage);
    });
  
    function handleInput() {
      // Save text to local storage when input changes
      saveToLocalStorage(document.querySelector('#editor').value);
    }
  
    function downloadText() {
      const text = document.querySelector('#editor').value;
      const blob = new Blob([text], { type: 'text/plain' });
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = 'text_file.txt';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  
    function discardText() {
      document.querySelector('#editor').value = '';
      // Clear local storage when text is discarded
      clearLocalStorage();
    }
  
    function clearText() {
      document.querySelector('#editor').value = '';
      // Save text to local storage when text is cleared
      saveToLocalStorage('');
    }
  
    function loadFromLocalStorage() {
  const storedText = localStorage.getItem('textEditorContent');
  document.querySelector('#editor').value = storedText !== null ? storedText : '';
}


  
    function saveTextManually() {
      // Save text to local storage when "Save" button is clicked
      saveToLocalStorage(document.querySelector('#editor').value);
    }
  
    function clearLocalStorage() {
      localStorage.removeItem('textEditorContent');
    }
  
    function saveToLocalStorage(text) {
      localStorage.setItem('textEditorContent', text || '');
    }
  </script>
  
  
  
  
  
  
</body>

</html>

I tried lots of stuff like asking chatGPT but that didn’t work either. ChatGPT tried a lot of different approaches none worked. There are no errors in the console of Inspect Element.

Tags:

2

Answers


  1. 0

    You’re saving to local storage whenever they hit save and also whenever the text is updated.

        // Add event listener for input changes
    document.querySelector('#editor').addEventListener('input', handleInput);
    // Add event listener for the "Save" button
    document.querySelector('#saveBtn').addEventListener('click', saveTextManually);

 
    function handleInput() {
      // Save text to local storage when input changes
      saveToLocalStorage(document.querySelector('#editor').value);
    }

    function saveTextManually() {
      // Save text to local storage when "Save" button is clicked
      saveToLocalStorage(document.querySelector('#editor').value);
    }

    Remove the handleInput listener.

    You have a "Clear Text" and a "Clear Storage" button but you are also clearing storage when you click "Clear Text" and that looks like a mistake too.

        function discardText() {
      document.querySelector('#editor').value = '';
      // Clear local storage when text is discarded
      clearLocalStorage();
    }
  
    function clearText() {
      document.querySelector('#editor').value = '';
      // Save text to local storage when text is cleared
      saveToLocalStorage('');
    }

    A call to saveToLocalStorage('') is the same as a call to clearLocalStorage(). So remove that from the clearText handler.

    Login or Signup to reply.
  2. 0

    Your problem looks like an input event is being executed upon your textarea after the storage was cleared, prompting a save of its current content, which was not cleared. Therefore, it seems to me that you should also clear your textarea when your storage is cleared:

        function clearLocalStorage() {
      clearText();
      localStorage.removeItem('textEditorContent');
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search