index.js

var dados = [];

function delRegister(id) {
    let canDelete = confirm("Deseja realmente remover o contato da agenda?")

    if (canDelete) {
        for (let i = 0; i < dados.length; i++) {
            if (dados[i].ID == id) {
                dados.splice(i, 1)
            }
        }

        fullTable()
    }
}

function editRegister(id) {
    $("#modalRegistro").modal("show")

    dados.forEach(function (item) {
        if (item.ID == id) {
            $("#hideID").val(item.ID)
            $("#txtName").val(item.Name)
            $("#txtEmail").val(item.Email)
            $("#txtWhatsapp").val(item.Whatsapp)
            $("#txtInstagram").val(item.Instagram)
        }
    })
}

function fullTable() {
    if (Array.isArray(dados))

        localStorage.setItem("__dados__", JSON.stringify(dados))

    $("#tabelaDados tbody").html("")
    //LIMPA A LINHA DAS TABELAS

    dados.forEach(function (item) {
        //TEMPLATE STRING p/ criar linhas de acordo com os objetos.
        $("#tabelaDados tbody").append(`<tr>
                <td>${item.ID}</td>
                <td>${item.Name}</td>
                <td>${item.Email}</td>
                <td>${item.Whatsapp}</td>
                <td>${item.Instagram}</td>
                <td><button type="button" class="btn btn-warning" onclick="javascripe:editRegister(${item.ID})"><i class="fa fa-edit"></i> Editar </button></td>
                <td><button type="button" class="btn btn-danger" onclick="javascript:delRegister(${item.ID});"><i class="fas fa-trash-alt"></i> Excluir </button></td
            </tr>`)
    })
}

$(function () {
    //Vai executar quando carregar o index.
    dados = JSON.parse(localStorage.getItem("__dados__")) || [];

    if (dados) {
        fullTable()
    }

    $("#buttonSave").click(function () {
        //Ao clicar, salvar.
        let _id = $("#hideID").val()
        let Name = $("#txtName").val()
        let Email = $("#txtEmail").val()
        let Whatsapp = $("#txtWhatsapp").val()
        let Instagram = $("#txtInstagram").val()

        if (!_id || _id == "0") {
            let registro = {}
            registro.Name = Name
            registro.Email = Email
            registro.Whatsapp = Whatsapp
            registro.Instagram = Instagram

            registro.ID = dados.length + 1
            dados.push(registro)
        }
        else {
            dados.forEach(function (item) {
                if (item.ID == _id) {
                    item.Name = Name
                    item.Email = Email
                    item.Whatsapp = Whatsapp
                    item.Instagram = Instagram
                }
            })
        }

        //Alerta de contato adicionado e fechar modal.
        alert("Novo contato adicionado")
        $("#modalRegistro").modal("hide")

        //Limpar campos da modal ao adicionar novamente
        $("#hideID").val("0")
        $("#txtName").val("")
        $("#txtEmail").val("")
        $("#txtWhatsapp").val("")
        $("#txtInstagram").val("")

        fullTable()
    })

})