本地存储未保存到

问题描述 投票：0回答：1

我有一个简单的文本编辑器，当我尝试保存到本地存储时，如果刷新页面，它就可以工作，但如果我清除文本，然后刷新并单击从存储加载，它将无法工作。 这是我的代码

<!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>

我尝试了很多东西，比如询问chatGPT，但这也不起作用。 ChatGPT 尝试了很多不同的方法，但没有成功。 Inspect Element 的控制台没有错误。

javascript html local-storage
1个回答
0
投票

只要点击保存，您就会保存到本地存储，并且每当文本更新时。

    // 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);
    }

删除 

handleInput
监听器。

您有一个“清除文本”和一个“清除存储”按钮，但当您单击“清除文本”时也会清除存储，这看起来也像是一个错误。

    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('');
    }

调用 

saveToLocalStorage('')
与调用 
clearLocalStorage()
相同。因此，请从 
clearText
处理程序中删除它。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.