How can setTimeout save and load data back to form inputs if browser crashes, and I visit that same page again?

Question

How can setTimeout save and load data for select form inputs? I tried to get it working with event listeners. I checked the capture and bubble which I am still trying to wrap my head around.

I need it to set or get values assigned it to respective elements from the input field depending if there is changes such as focus or blur on the fields.

Is there a feature or step I missed and where should I start looking?

answers = document.getElementsByName('answers[]');
for(var i = 0; i < answers.length; i++) {
  nodeIndex = 'answer' + i;
  if(answers[i] == ''){
    answers[i].addEventListener('blur', function(){
      localStorage.setItem(nodeIndex, answers[i].value);
    });
  }
  else {
    answers[i].addEventListener('focus', function(){
      answers[i].value = localStorage.getItem(nodeIndex);
      localStorage.setItem(nodeIndex, answers[i].value);
    });
    answers[i].addEventListener('blur', function(){        
      localStorage.setItem(nodeIndex, answers[i].value);
      answers[i].value = localStorage.getItem(nodeIndex);
    });
  } // end if
  
} // end forloop

REVISED
I noticed only the last element is affected. When I enter text in answers[0] to answers[14], their values are saved and set/copied to only the last element. How am I using this incorrectly? I read up and seem to follow the rules...

    function processAnswers(i, answers) {
  setTimeout(function() {
    nodeIndex = 'answer' + i;          
    if(localStorage.getItem(nodeIndex) === null) {
      
      answers[i].addEventListener('blur', function(){
        localStorage.setItem(nodeIndex, answers[i].value);
      });
      
    } // end if
    else {
      
      answers[i].addEventListener('focus', function(){
        answers[i].value = localStorage.getItem(nodeIndex);
        localStorage.setItem(nodeIndex, answers[i].value);
        
      });
      answers[i].addEventListener('blur', function(){        
        localStorage.setItem(nodeIndex, answers[i].value);
        answers[i].value = localStorage.getItem(nodeIndex);
      });
      
    } // end else
  }, 100); // end setTimeout()
} // end processAnswers();
               
 answers = document.getElementsByName('answers[]'); 
 for(var i = 0; i < answers.length; i++) {
   processAnswers(i, answers);
 }

My code was getting out of hand. I decided to start over and keep it simple... and it worked!

var answers;
var clearAnswersBtn;
var clearAnswers;

var MainLoop = function MainLoopFunction(){
  
  answers = document.getElementsByName('answers[]');
  clearAnswersBtn = document.getElementsByTagName('body')[0];
  clearAnswersBtn.innerHTML = clearAnswersBtn.innerHTML + '<button id="clearanswers" style="position:fixed;bottom:0;right:0;padding:5px;margin:0 10px 10px 0;z-index:99999">Clear Saved Answers</button>';

  clearAnswers = document.getElementById('clearanswers');

  clearAnswers.addEventListener("click", function(){
    localStorage.clear();
    alert("Answers Cleared!");
  });

  function saveAnswers(i, answer){
    if(localStorage.getItem(i)) {
      answer.value = localStorage.getItem(i);
    }
    else {
      answer.addEventListener("blur", function(){
    if(!localStorage.getItem(i)) {
      localStorage.setItem(i, answer.value);
    }      
      });
    }
  } // end saveAnswers()
  
  setTimeout(function(){
    for( var i = 0; i < answers.length; i++) {
      saveAnswers(i, answers[i]);
    }
  }, 0)
}();