Issue
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&to=email@email.com 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.
Currently when I type something into the text field and refresh the page it stays there but if I clear the text and then click load from storage nothing happens. I thought it was because the autosave saved the text as null or an empty string but after adding an if loop to prevent that nothing happens.
My expected result is that when i clear the text field then refresh the page and then click load from storage it should load the text that i typed before refreshing and clearing it. For example if i type 'hello' then click save and then clear the text field and refresh the page it should show 'hello' in the text field after clicking load from storage.
Solution
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.
Answered By - chiliNUT
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.