Setting cookies for a table by a button and also when leaving a page

Question

I'm building a tabular interface for student grades. The table takes a name, id, 5 assignments (at default) and a final grade column that calculates the average of the 5 assignments. The page has other features such as adding assignment columns or students as rows. While they are not 100% at the moment, my main issue at the minute is the ability to save the table as a cookie on a button click as well as being able to restore from that cookie on a separate button. I'd like to also be able to set a cookie when leaving the page/returning to the page. I originally had done it as local storage but failed in my attempts to do it as a cookie instead. I've looked up a few different tutorials on cookies including w3schools and others but I can't seem to find a way to save the table and its data and then be able to restore it as a table rather than a set of strings. If anyone could help it would be greatly appreciated.

Code:

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>

How large do these tables get? Cookies are not meant to store a lot of data; they have a limit of 4k bytes... Also, the way your setting and getting your cookie is incorrect. The canonical Q&A on SO is [How do I create and read a value from cookie?](https://stackoverflow.com/q/4825683/215552) — Heretic Monkey, Mar 18 '20 at 13:51
I currently don't have a limit on how large the tables can get but I can put one in place if necessary. I had been looking at similar examples for setCookie() and getCookie() methods, I understand how they work I just don't know how to save the data of the table and put it back in, the js code above where i try to use document.cookie was a last-ditch effort, started giving up at that point been trying to do it for over a day now. — Odin_is_with_us, Mar 18 '20 at 13:56
So two things I thought of, one is, do you really need to make your own database, and not just use something like access(why reinvent the wheel). I know this is kind of a cop-out answer, so I was just thinking if you must do this, then why not try to write the data you want to save to a notepad file or something. I never really learned much about saving data to a save file, but know it's a thing that can be done. — Jyreeil, Mar 18 '20 at 23:06

Setting cookies for a table by a button and also when leaving a page

0 Answers0