Entendi, você quer evitar de perder os dados em quanto não concluir o formulário acaso feche acidentalmente o popup da extensão, é isto?
Você pode usar localStorage
, por exemplo:
localStorage.setItem('meuForm', '... dados do form ...');
E carregar os dados assim:
localStorage.getItem('meuForm');
Claro que isto não vai fazer nada automaticamente, você tem que fazer uma função que leia todos inputs e associe cada um a um tipo de chave no localStorage
, você pode usar JSON.stringify
para salvar e JSON.parse
para recarregar, ou então pode usar vários setItem
, por exemplo:
<form>
<input type="text" name="nome">
<input type="text" name="sobrenome">
<select name="sexo">
<option name="">Selecione...</option>
<option name="femi">Feminio</option>
<option name="masc">Masculino</option>
</select>
<button>Enviar</button>
</form>
O Javascript ficaria assim:
(function() {
var campos;
//Detecta alterações nos inputs, textareas e selects
function eventosRascunho() {
campos = document.querySelectorAll("#meuForm input, #meuForm textarea, #meuForm select");
for (var i = campos.length - 1; i >= 0; i--) {
if (campos[i].tagName === "SELECT") {
campos[i].addEventListener("change", salvaRascunho);
} else {
campos[i].addEventListener("input", salvaRascunho);
campos[i].addEventListener("keyup", salvaRascunho);
campos[i].addEventListener("paste", salvaRascunho);
campos[i].addEventListener("cut", salvaRascunho);
}
}
}
//Salva rascunho no localStorage
function salvaRascunho() {
for (var i = campos.length - 1; i >= 0; i--) {
var nameAttr = campos[i].getAttribute("name");
if (nameAttr) {
localStorage.setItem(nameAttr, campos[i].value);
}
}
}
//Limpa rascunho no localStorage
function limparRascunho() {
for (var i = campos.length - 1; i >= 0; i--) {
var nameAttr = campos[i].getAttribute("name");
if (nameAttr) {
localStorage.removeItem(nameAttr);
}
}
}
//Restaura rascunho para os <select>
function restauraHtmlSelect(options, valor) {
for (var i = options.length - 1; i >= 0; i--) {
if (options[i].value === valor) {
options[i].selected = true;
break;
}
}
}
//Carrega rascunho se existir
function carregarRascunho() {
//Verifica se os rascunhos estão vazios
if (localStorage.length === 0) {
return;
}
for (var i = campos.length - 1; i >= 0; i--) {
var dados = localStorage.getItem(campos[i].getAttribute("name"));
if (!dados) {
continue;
}
if (campos[i].tagName === "SELECT") {
restauraHtmlSelect(campos[i].querySelectorAll("option"));
} else {
campos[i].value = dados;
}
}
}
window.onload = function () {
eventosRascunho();
};
})();
Após enviar o formulário com sucesso use a função limparRascunho();
para apagar os dados e evitar que o form restaure eles.