Настройка файлов cookie для таблицы с помощью кнопки, а также при выходе из страницы

Question

Я создаю табличный интерфейс для оценок учеников. Таблица содержит имя, идентификатор, 5 назначений (по умолчанию) и столбец итоговой оценки, в котором вычисляется среднее из 5 назначений. На странице есть и другие функции, такие как добавление столбцов заданий или учащихся в виде строк. Хотя в настоящий момент они не на 100%, моей главной проблемой на данный момент является возможность сохранения таблицы как повара ie при нажатии кнопки, а также возможность восстановления этого повара ie при помощи отдельной кнопки. , Я также хотел бы иметь возможность установить повара ie при выходе из страницы / возвращении на страницу. Первоначально я делал это как локальное хранилище, но потерпел неудачу в своих попытках сделать это как повар ie. Я просмотрел несколько различных руководств по файлам cookie, включая w3schools и другие, но я не могу найти способ сохранить таблицу и ее данные, а затем восстановить ее как таблицу, а не как набор строк. Если кто-то может помочь, это будет очень признателен.

Код:

let avg;
let count = 0;
let finalGrades = [];
let pointer = 0;
let letters = ["A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"];
let scales = [4.0, 3.7, 3.3, 3.0, 2.7, 2.3, 2.0, 1.7, 1.3, 1.0, 0.7, 0.0];
let assignmentCount;

function findAvg() {
    assignmentCount = 0;
    count = 0;
    $('tr').each(function() {
        var totalmarks = 0;
        $(this).find('.assignments').each(function() {
            var marks = $(this).text(); {
                if(marks === "-" || marks.length === 0) {
                    $(this).html('-');
                    count++;
                    $(this).css({"background-color": "yellow"});
                }
                else if (marks !== "-") {
                    totalmarks += parseFloat(marks);
                    assignmentCount++;
                    $(this).css({"background-color": "initial"});
                }
            }
        });
        avg = Math.round(totalmarks / assignmentCount);
        finalGrades.push(avg);
        $(this).find('.finalmark').html(avg);
        if(avg < 60) {
            $(this).find('.finalmark').css({"background-color": "red"});
        }
        else
        {
            $(this).find('.finalmark').css({"background-color": "initial"});
        }
    });
    document.getElementById("assignmentsSub").innerHTML = "Number of Assignments not Submitted: " + count;
}

$(function() {
    $("#finalgrade").on('click', () => {
        //console.log("123");
        switch (pointer) {
            case 0:
                pointer = 1;
                getGrade(pointer);
                break;
            case 1:
                pointer = 2;
                getGrade(pointer);
                break;
            case 2:
                pointer = 0;
                findAvg();
                break;
        }

    });
});

function getGrade(pointer) {
    if (pointer === 1) {
        $("#finalgrade").text("Letter Grade");
        $('tr').each(function() {
            var totalmarks = 0;
            $(this).find('.assignments').each(function() {
                var marks = $(this).text(); {
                    if (marks !== "-") {
                        totalmarks += parseFloat(marks);
                        count++;
                    }
                }
            });
            avg = Math.round(totalmarks / 5);
            finalGrades.push(avg);
            if(avg > 92 && avg < 101) {
                $(this).find('.finalmark').html(letters[0]);
            }
            else if(avg > 89 && avg < 93) {
                $(this).find('.finalmark').html(letters[1]);
            }
            else if(avg > 85 && avg < 91) {
                $(this).find('.finalmark').html(letters[2]);
            }
            else if(avg > 82 && avg < 87) {
                $(this).find('.finalmark').html(letters[3]);
            }
            else if(avg > 79 && avg < 83) {
                $(this).find('.finalmark').html(letters[4]);
            }
            else if(avg > 76 && avg < 80) {
                $(this).find('.finalmark').html(letters[5]);
            }
            else if(avg > 72 && avg < 77) {
                $(this).find('.finalmark').html(letters[6]);
            }
            else if(avg > 69 && avg < 73) {
                $(this).find('.finalmark').html(letters[7]);
            }
            else if(avg > 66 && avg < 70) {
                $(this).find('.finalmark').html(letters[8]);
            }
            else if(avg > 62 && avg < 67) {
                $(this).find('.finalmark').html(letters[9]);
            }
            else if(avg > 59 && avg < 63) {
                $(this).find('.finalmark').html(letters[10]);
            }
            else {
                $(this).find('.finalmark').html(letters[11])
            }
        });

        //}
    } else if (pointer === 2) {
        $("#finalgrade").text("4.0 Grade Average");
        $('tr').each(function() {
            var totalmarks = 0;
            $(this).find('.assignments').each(function() {
                var marks = $(this).text(); {
                    if (marks !== "-") {
                        totalmarks += parseFloat(marks);
                        count++;
                    }
                }
            });
            avg = Math.round(totalmarks / 5);
            finalGrades.push(avg);
            if(avg > 92 && avg < 101) {
                $(this).find('.finalmark').html(scales[0] + ".0");
            }
            else if(avg > 89 && avg < 93) {
                $(this).find('.finalmark').html(scales[1]);
            }
            else if(avg > 85 && avg < 91) {
                $(this).find('.finalmark').html(scales[2]);
            }
            else if(avg > 82 && avg < 87) {
                $(this).find('.finalmark').html(scales[3] + ".0");
            }
            else if(avg > 79 && avg < 83) {
                $(this).find('.finalmark').html(scales[4]);
            }
            else if(avg > 76 && avg < 80) {
                $(this).find('.finalmark').html(scales[5]);
            }
            else if(avg > 72 && avg < 77) {
                $(this).find('.finalmark').html(scales[6] + ".0");
            }
            else if(avg > 69 && avg < 73) {
                $(this).find('.finalmark').html(scales[7]);
            }
            else if(avg > 66 && avg < 70) {
                $(this).find('.finalmark').html(scales[8]);
            }
            else if(avg > 62 && avg < 67) {
                $(this).find('.finalmark').html(scales[9] +".0");
            }
            else if(avg > 59 && avg < 63) {
                $(this).find('.finalmark').html(scales[10]);
            }
            else {
                $(this).find('.finalmark').html(scales[11] + ".0")
            }
        });
    }
}

function addRow() {
    $('#table').append('<tr>' +
        '<td>Brian</td>' +
        '<td>18342345</td>' +
        '<td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()">-</td>' +
        '<td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()">-</td>' +
        '<td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()">-</td>' +
        '<td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()">-</td>' +
        '<td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()">-</td>' +
        '<td class="finalmark" align="right"></tr>');

}

function addColumn() {
    assignmentCount++;
    $('#table').find('tr').each(function(){ $(this).find('th').eq(6).after('<th contenteditable="true"><h3>Assignment</h3></th>');
        $(this).find('td').eq(6).after('<td class= "assignments" align="right" contenteditable="true" onkeyup="findAvg()">-</td>');
    });
}

function saveTable() {
    document.cookie = document.querySelector('#table').innerHTML.trim(); // store
}

function restoreTable() {
    document.querySelector('#table').innerHTML = document.cookie; // restore

}

function removeRow() {
        $('#table tr:last').remove();
}

table {
    border-collapse: collapse;
}

table, th, td {
    border: 2px solid black;
    font-family: sans-serif;
}

tr:nth-child(even) {
    background-color: lightgrey;
}

tr:nth-child(odd) {
    background-color: rgba(128, 128, 128, 0.51);
}

th {
    background-color: grey;
}

h3 {
    alignment: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Grades</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

    <table id="table">
        <tr>
            <th id="studentName"><h3>Student Name</h3></th>
            <th id="studentID"><h3>Student ID</h3></th>
            <th id="as1"><h3>Assignment 1</h3></th>
            <th id="as2"><h3>Assignment 2</h3></th>
            <th id="as3"><h3>Assignment 3</h3></th>
            <th id="as4"><h3>Assignment 4</h3></th>
            <th id="as5"><h3>Assignment 5</h3></th>
            <th id="finalgrade"><h3>Average [%]</h3></th>
        </tr>
        <tr>
            <td align="left">a</td>
            <td align="left">18401696</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="finalmark" align="right"></td>
        </tr>
        <tr>
            <td align="left">b</td>
            <td align="left">18401900</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="finalmark" align="right"></td>
        </tr>
        <tr>
            <td align="left">c</td>
            <td align="left">18401800</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="finalmark" align="right"></td>
        </tr>
        <tr>
            <td align="left">d</td>
            <td align="left">18401000</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="finalmark" align="right"></td>
        </tr>
        <tr>
            <td align="left">e</td>
            <td align="left">18401231</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="finalmark" align="right"></td>
        </tr>
        <tr>
            <td align="left">f</td>
            <td align="left">18401656</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="finalmark" align="right"></td>
        </tr>
        <tr>
            <td align="left">g</td>
            <td align="left">18405423</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="finalmark" align="right"></td>
        </tr>
        <tr>
            <td align="left">h</td>
            <td align="left">18401987</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="finalmark" align="right"></td>
        </tr>
        <tr>
            <td align="left">i</td>
            <td align="left">18400000</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="finalmark" align="right"></td>
        </tr>
        <tr>
            <td align="left">j</td>
            <td align="left">18401111</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="assignments" align="right" contenteditable="true" onkeyup="findAvg()" onfocus="this.textContent=''">-</td>
            <td class="finalmark" align="right"></td>
        </tr>

    </table>
    <div id="assignmentsSub"></div>
    <button id="addRow" onclick="addRow()">Add Entry</button>
    <button onclick="addColumn()">Add Assignment</button>
    <button onclick="saveTable()">Save Table</button>
    <button onclick="restoreTable()">Reset to Previous Save</button>
    <button id="remove" onclick="removeRow()">Delete Last Row</button>
</body>
</html>