JSFiddle - React, Tailwind, and code Playground

by Vitaliy Koval

HTML

<input name="name" type="text" placeholder="Имя" data-woo-saver><br>
<textarea name="message" placeholder="Имя" data-woo-saver></textarea><br>
<input name="email" type="email" placeholder="Емайл" data-woo-saver>

JavaScript

function wooFormLoad(){
	const inputs = document.querySelectorAll('input[data-woo-saver]:not([type="file"]):not([type="checkbox"]):not([type="radio"]), textarea[data-woo-saver]');
  inputs.forEach(function(item, key, arr){
    let nodeName = item.nodeName;
  	let name = item.getAttribute('name');
  	let saveValue = localStorage.getItem(`wsave-${name}`);
    if(saveValue){
		if(nodeName === 'INPUT'){
			item.value = saveValue;
		}else if(nodeName === 'TEXTAREA'){
			item.innerHTML = saveValue;
		}

    }
  });
  addEvent();
}
function addEvent(){
	/*
  document.addEventListener('keydown', function(event) {
		wooFormSave(event.target);
  });*/
  document.addEventListener('change', function(event) {
		wooFormSave(event.target);
  });
}
function wooFormSave(iNode){
    let name = iNode.getAttribute('name');
   	if(!name){return false;}
    let saveValue = localStorage.getItem(`wsave-${name}`);
 		let inputVal = (iNode.value==='' || !iNode.value)?'':iNode.value;
 
    if(name && (inputVal || inputVal==='' || saveValue)){
    	localStorage.setItem(`wsave-${name}`, iNode.value);
    }
}
document.addEventListener('DOMContentLoaded', wooFormLoad);