In this short post, I'll show you how to simply add the auto-save functionality to your HTML page with javascript.

Whenever the user starts typing we show a message that there are unsaved changes and 1 second after they stop typing we save the changes locally. When the user clicks the save button, we update the message to Saved.

Before we start, I want to bring your attention to DoTenX, an open-source modern platform to build websites, applications, APIs and much more.

You can think of DoTenX as the Wordpress built for 2023!

You can find the repository here: https://github.com/dotenx/dotenx.

Let's begin.

We start by adding the necessary elements to our HTML page:

<div class="container">
  <textarea id="textarea"></textarea>
  <div id="status"></div>
  <button id="save-button">Save</button>
</div>

To make it look better, we apply some basic styles to the elements too.

CSS:

.container {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

textarea {
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  outline: none;
  font-size: 18px;
  padding: 10px;
  resize: none;
}

#status {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #4caf50;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
} 

Now let's first see the javascript code and I'll explain the details after that.

const textarea = document.getElementById('textarea');
const saveButton = document.getElementById('save-button');
const statusText = document.getElementById('status');

let savedText = localStorage.getItem('text');
if (savedText) {
  textarea.value = savedText;
}

function save() { 
// Save the contents of the textarea using an API call
  console.log(textarea.value);
  localStorage.setItem('text', textarea.value);
  statusText.textContent = 'Saved';
}

let timeout; textarea.addEventListener('input', () => {
  statusText.textContent = 'Unsaved changes';
  clearTimeout(timeout);
  timeout = setTimeout(save, 1000);
});

saveButton.addEventListener('click', save);

In our code, first, we get the elements using document.getElementById, and the id of the elements we provided earlier.

Next, we check to see if there is any saved text in local storage. If there is, we set the value of the text area to this saved text. This way, if you've saved some text before and then come back to the page later, the text will still be there.

We then define a save function that is used to save the current contents of the text area to local storage. The function first logs the current value of the text area to the console, and then it saves the text to local storage using localStorage.setItem('text', textarea.value). It also sets the text of the status message to 'Saved'.

We also define a timeout variable that we'll use to set a timer whenever the user makes changes to the text area. This timer will call the save function after a delay of 1 second.

Then, we set up an event listener on the text area that listens for 'input' events. These events are triggered whenever the user types something into the text area. When this event is triggered, the event listener function sets the text of the status message to 'Unsaved changes' and then sets a timer using setTimeout that will call the save function after a delay of 1 second. If the user makes more changes before the timer runs out, the timer is reset.

Finally, we set up an event listener on the save button that listens for 'click' events. When the save button is clicked, the save function is called.