Keep form data when opening and closing extension?

Question

I’m creating an extension for Google Chrome, where the user will fill out a form through this.

How it works:

1. The user clicks on the extension icon and a popup with form;
2. Start filling in the form;
3. Complete;
4. Send form;
5. End.

Problem:

1. The user clicks on the extension icon and a popup with form;
2. Start filling in the form;
3. User clicks the extension icon unintentionally or outside the popup;
4. Extension closes;
5. User opens again;
6. Data already filled were lost;
7. Extension becomes unviable;
8. End.

I wanted to know how not to lose this data, but I don’t even know how to search this kind of problem, on Google. Can help me?

Answer 1

Got it, you want to avoid losing the data on when not completing the form accidentally close the extension popup, is this?

You can use localStorage, for example:

localStorage.setItem('meuForm', '... dados do form ...');

And load the data like this:

localStorage.getItem('meuForm');

Of course this will not do anything automatically, you have to make a function that reads all inputs and associate each one to a type of key in the localStorage, you can use JSON.stringify to save and JSON.parse to reload, or you can use several setItem, for example:

<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>

Javascript would look like this:

(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();
    };
})();

After sending the form successfully use the function limparRascunho(); to erase the data and prevent the form from restoring it.