Javascript 通过按钮为表格设置cookies，以及在离开页面时设置cookies

我正在为学生的成绩建立一个表格界面。该表包含一个名称、id、5个作业（默认情况下）和一个计算5个作业平均值的最终成绩列。该页面还具有其他功能，例如添加作业列或学生作为行。虽然它们目前还不是100%，但我目前的主要问题是，能够在单击按钮时将表保存为cookie，并且能够在单独的按钮上从cookie恢复。我还希望能够在离开页面/返回页面时设置cookie。我最初是把它当作本地存储来做的，但我试图把它当作cookie来做，却失败了。我查阅了一些关于cookies的不同教程，包括w3schools和其他教程，但我似乎找不到一种方法来保存表及其数据，然后将其还原为一个表而不是一组字符串。如果有人能帮忙，我将不胜感激

代码：

let平均值；
让计数=0；
设最终评分=[]；
设指针=0；
让字母=[“A”，“A-”，“B+”，“B-”，“C+”，“C”，“C-”，“D+”，“D-”，“F”]；
让量表=[4.0,3.7,3.3,3.0,2.7,2.3,2.0,1.7,1.3,1.0,0.7,0.0]；
让分配算数；
函数findAvg（）{
assignmentCount=0；
计数=0；
$（'tr'）。每个（函数（）{
var totalmarks=0；
$（this）.find（'.assignments'）.each（function（）{
var marks=$（this.text（）{
if（marks==“-”| | marks.length==0）{
$（this.html（'-'）；
计数++；
$（this.css（{“背景色”：“黄色”}）；
}
否则如果（标记！==“-”）{
totalmarks+=解析浮点（标记）；
赋值计数++；
$（this.css（{“background color”：“initial”}）；
}
}
});
平均=数学四舍五入（总分/分配计数）；
最终等级推送（平均）；
$（this.find（'.finalmark'）.html（平均值）；
如果（平均值<60）{
$（this.find（'.finalmark'）.css（{“背景色”：“红色”}）；
}
其他的
{
$（this.find（'.finalmark'）.css（{“背景色”：“首字母”}）；
}
});
document.getElementById（“assignmentsSub”）.innerHTML=“未提交的工作分配数：”+count；
}
$（函数（）{
$（“#最终交易”）。在（'点击'，（）=>{
//控制台日志（“123”）；
开关（指针）{
案例0：
指针=1；
getGrade（指针）；
打破
案例1：
指针=2；
getGrade（指针）；
打破
案例2：
指针=0；
findAvg（）；
打破
}
});
});
函数getGrade（指针）{
如果（指针==1）{
美元（“#最终贸易”）。文本（“字母等级”）；
$（'tr'）。每个（函数（）{
var totalmarks=0；
$（this）.find（'.assignments'）.each（function（）{
var marks=$（this.text（）{
如果（标记！=“-”）{
totalmarks+=解析浮点（标记）；
计数++；
}
}
});
平均=数学四舍五入（总分/5）；
最终等级推送（平均）；
如果（平均值>92&&avg<101）{
$（this）.finalmark'）.html（字母[0]）；
}
否则如果（平均值>89&&avg<93）{
$（this.find（'.finalmark'）.html（字母[1]）；
}
否则如果（平均值>85&&avg<91）{
$（this.find（'.finalmark'）.html（字母[2]）；
}
否则如果（平均值>82&&avg<87）{
$（this.find（'.finalmark'）.html（字母[3]）；
}
否则如果（平均值>79&&avg<83）{
$（this.find（'.finalmark'）.html（字母[4]）；
}
否则，如果（平均值>76&&平均值<80）{
$（this.find（'.finalmark'）.html（字母[5]）；
}
否则，如果（平均值>72和平均值<77）{
$（this.find（'.finalmark'）.html（字母[6]）；
}
否则，如果（平均值>69和平均值<73）{
$（this.find（'.finalmark'）.html（字母[7]）；
}
否则，如果（平均值>66和平均值<70）{
$（this.find（'.finalmark'）.html（字母[8]）；
}
否则如果（平均值>62和平均值<67）{
$（this.find（'.finalmark'）.html（字母[9]）；
}
否则如果（平均值>59&&avg<63）{
$（this.find（'.finalmark'）.html（字母[10]）；
}
否则{
$（this.find（'.finalmark'）.html（字母[11]）
}
});
//}
}else if（指针===2）{
元（“#最终贸易”）。文本（“平均4.0级”）；
$（'tr'）。每个（函数（）{
var totalmarks=0；
$（this）.find（'.assignments'）.each（function（）{
var marks=$（this.text（）{
如果（标记！=“-”）{
totalmarks+=解析浮点（标记）；
计数++；
}
}
});
平均=数学四舍五入（总分/5）；
最终等级推送（平均）；
如果（平均值>92&&avg<101）{
$（this.find（'.finalmark'）.html（scales[0]+.0”）；
}
否则如果（平均值>89&&avg<93）{
$（this.find（'.finalmark'）.html（scales[1]）；
}
否则如果（平均值>85&&avg<91）{
$（this.find（'.finalmark'）.html（scales[2]）；
}
否则如果（平均值>82&&avg<87）{
$（this.find（'.finalmark'）.html（scales[3]+.0”）；
}
否则如果（平均值>79&&avg<83）{
$（this.find（'.finalmark'）.html（scales[4]）；
}
否则，如果（平均值>76&&平均值<80）{
$（thi）