Save & Restore Textareas.

Certainly! Here's how you can achieve this:

1. Run a function every second that collects all the textareas on the page and builds an object with the name attributes as keys and the contents as values.
2. Save this object in the localStorage under the key savedTextAreas.
3. When the page loads, check if this record exists in the localStorage, and if it does, add a button to the page to restore the textareas.

Here's the code to accomplish the above tasks:

javascriptCopy code
// Function to save textareas
function saveTextAreas() {
  var textareas = document.querySelectorAll('textarea');
  var savedTextAreas = {};

  textareas.forEach(function(textarea) {
    if (textarea.name && textarea.value.trim() !== '') {
      savedTextAreas[textarea.name] = textarea.value;
    }
  });

  localStorage.setItem('savedTextAreas', JSON.stringify(savedTextAreas));
}

// Function to restore textareas
function restoreTextAreas() {
  var savedTextAreas = JSON.parse(localStorage.getItem('savedTextAreas') || '{}');

  for (var key in savedTextAreas) {
    var textarea = document.querySelector(`textarea[name="${key}"]`);
    if (textarea) {
      textarea.value = savedTextAreas[key];
    }
  }
}

// Function to add restore button
function addRestoreButton() {
  var savedTextAreas = JSON.parse(localStorage.getItem('savedTextAreas') || '{}');
  var count = Object.keys(savedTextAreas).filter(key => savedTextAreas[key].trim() !== '').length;

  if (count > 0) {
    var button = document.createElement('button');
    button.textContent = `Restore ${count} textareas`;
    button.addEventListener('click', restoreTextAreas);
    document.body.appendChild(button);
  }
}

// Run saveTextAreas every second
setInterval(saveTextAreas, 1000);

// Check if there's saved textareas in localStorage and add restore button
window.addEventListener('load', addRestoreButton);

This code assumes that the name attributes for the textareas are unique on the page, and it uses the name attributes as the keys in the JavaScript object to save the content.

If the textareas are populated with saved content when the page loads, a button will be added to the page that says "Restore X textareas", where X is the number of textareas that have a non-blank value. Clicking on that button will then repopulate every textarea on the page with the stored content.

Certainly! Here are the requested updates:

1. Store to localStorage only if JSON.stringify(savedTextAreas) has changed since the last time.
2. Replace setInterval with an event listener on document.body that fires on changes to any input field, and then runs the code if it identifies that the changed input is of type textarea.
3. Ensure that the button text is "Restore 1 textarea" if there is only one.

Here's the updated code:

javascriptCopy code
// Variable to store previous state of textareas
var previousState = '';

// Function to save textareas
function saveTextAreas() {
  var textareas = document.querySelectorAll('textarea');
  var savedTextAreas = {};

  textareas.forEach(function(textarea) {
    if (textarea.name && textarea.value.trim() !== '') {
      savedTextAreas[textarea.name] = textarea.value;
    }
  });

  var currentState = JSON.stringify(savedTextAreas);
  if (currentState !== previousState) {
    localStorage.setItem('savedTextAreas', currentState);
    previousState = currentState;
  }
}

// Function to restore textareas
function restoreTextAreas() {
  var savedTextAreas = JSON.parse(localStorage.getItem('savedTextAreas') || '{}');

  for (var key in savedTextAreas) {
    var textarea = document.querySelector(`textarea[name="${key}"]`);
    if (textarea) {
      textarea.value = savedTextAreas[key];
    }
  }
}

// Function to add restore button
function addRestoreButton() {
  var savedTextAreas = JSON.parse(localStorage.getItem('savedTextAreas') || '{}');
  var count = Object.keys(savedTextAreas).filter(key => savedTextAreas[key].trim() !== '').length;

  if (count > 0) {
    var button = document.createElement('button');
    button.textContent = `Restore ${count === 1 ? '1 textarea' : `${count} textareas`}`;
    button.addEventListener('click', restoreTextAreas);
    document.body.appendChild(button);
  }
}

// Event listener for changes in textarea
document.body.addEventListener('input', function(event) {
  if (event.target.tagName.toLowerCase() === 'textarea') {
    saveTextAreas();
  }
});

// Check if there's saved textareas in localStorage and add restore button
window.addEventListener('load', addRestoreButton);

This code adds an event listener to the document.body that listens for the input event. When this event fires, the code checks if the changed input is of type textarea. If it is, the saveTextAreas function is called.

The saveTextAreas function now compares the current state of the textareas with the previous state before saving to localStorage. If they are different, the state is saved, and the previous state is updated.

The code for adding the restore button has been updated to show "Restore 1 textarea" if there is only one textarea to restore.