Javascript 使用localStorage保存多个内容可编辑输入

我在.workspaceMain类的顶部有两个内容可编辑输入，一个是.mainHeader，另一个是.tableName

我在.toolbar中的.workspaceMain类顶部创建了一个保存按钮。我还在.mainHeader和.tableName代码序列中创建了一个id#edit，以在JavaScript代码中工作

当我在.main标题代码序列中有一个id为#edit并在更改文本后按.saveContent按钮时，我刷新文本并将文本更新为更改后的文本

如果我的id为#edit in.tableName，那么当我更改文本、保存和刷新时，.tableName的文本在保存后不会更新

我将如何更新JavaScript代码以适应一次保存多个内容可编辑输入

我尝试过使用#edit1和#edit2将JavaScript更改为与之相适应的方式来实现id的唯一性，但运气不佳

我还对整个内容可编辑部分做了一个换行，该部分只有一个id——格式根本不好

function saveEdits() {
            var editElem = document.getElementById("edit1");

            var userVersion = editElem.innerHTML;

            localStorage.userEdits = userVersion;
        }

        function checkEdits() {

    if(localStorage.userEdits!=null)
        document.getElementById("edit1").innerHTML=localStorage.userEdits;
    }

 function saveEdits() {
            var editElem = document.getElementById("edit2");

            var userVersion = editElem.innerHTML;

            localStorage.userEdits = userVersion;
        }

        function checkEdits() {

    if(localStorage.userEdits!=null)
        document.getElementById("edit2").innerHTML=localStorage.userEdits;
    }

代码：

函数saveEdits（）{
var editElem=document.getElementById（“编辑”）；
var userVersion=editElem.innerHTML；
localStorage.userEdits=userVersion；
}
函数checkEdits（）{
if（localStorage.userEdits！=null）
document.getElementById（“编辑”）.innerHTML=localStorage.userEdits；
}

/*~版权所有（c）Summit学习管理系统（由学生为学生制作）。2019. */
html>正文{
溢出：隐藏；
身高：100%；
保证金：0；
填充：0；
字体系列：“投石机MS”，无衬线；
}
#包装纸{
位置：绝对位置；
溢出：隐藏；
排名：0；
底部：0；
左：0；
右：0；
背景：#1B315E；
}
.背景{
背景图片：url（Assets/Images/background.jpg）；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
.loginBox{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：320px；
高度：420px；
背景：rgba（0,0,0,0.6）；
颜色：#FFF；
填充：40px 30px；
框大小：边框框；
}
.loginBox p{
保证金：0；
填充：0；
字体大小：粗体；
}
.loginBox输入{
宽度：100%；
边缘底部：20px；
}
.loginBox输入[type=“text”]，输入[type=“password”]{
边界：无；
大纲：无；
边框底部：1px实心#FFF；
背景：透明；
高度：40px；
字体大小：14px；
颜色：#FFF；
}
.loginBox输入[type=“submit”]{
边界：无；
大纲：无；
高度：40px；
字体大小：16px；
颜色：#FFF；
背景：#777；
字体大小：粗体；
}
.loginBox输入[type=“submit”]：悬停{
光标：指针；
颜色：#FFF；
背景：#888；
}
.机构，.信息{
字体大小：12px；
文本对齐：对齐；
}
* {
框大小：边框框；
}
.导航{
背景：#333；
溢出：隐藏；
字体系列：“投石机MS”，无衬线；
}
.导航链接{
边缘顶部：8px；
保证金权利：4px；
浮动：对；
边界：无；
大纲：无；
颜色：#1B315E；
背景#b6b6；
填充：4px6px；
字体大小：16px；
文本对齐：居中；
}
.导航链接：悬停{
背景#a5a5；
}
.menuDropDown{
浮动：左；
溢出：隐藏；
}
.menuDropDown>.menuButton{
边界：无；
大纲：无；
颜色：#FFF；
背景：继承；
字体：继承；
保证金：0；
字体大小：16px；
填充：12px 6px；
}
.menuButton:hover、.navigation>.menuDropDown:hover>.menuButton{
背景：#999；
颜色：#1B315E；
大纲：无；
边界：无；
}
.menuContent{
显示：无；
宽度：100%；
背景：无；
位置：绝对位置；
z指数：1；
左：0；
溢出：自动；
最大高度：85vh；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.menuDropDown:悬停>.menuContent{
显示：块；
}
menuColumn先生{
浮动：左；
宽度：25%；
填充：8px；
溢出y：自动；
背景：#999；
高度：235px；
}
.menuColumn>a{
浮动：无；
颜色：#1B315E；
填充：10px；
字体大小：14px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
梅努罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.menuColumn>a:悬停{
背景#a5a5；
}
.menuColumn>a.current{
背景#b6b6；
}
梅努海德先生{
颜色：#1B315E；
边际上限：0px；
边缘底部：8px；
}
.workspaceMain{
浮动：左；
宽度：72.5%；
高度：计算（100vh-43px）；
位置：相对位置；
溢出：自动；
右侧填充：2px；
背景：#FFF；
}
.工具栏{
背景：#777；
边框底部：1px实心#666；
}
.toolbar>.saveContent{
颜色：#1B315E；
边界：无；
大纲：无；
背景#b6b6；
填充：6px 6px；
字体大小：12px；
字体：继承；
}
.saveContent、.saveContent:hover、.toolllinks:hover{
背景#a5a5；
}
.工具链接{
边缘顶部：2倍；
保证金权利：4px；
浮动：对；
边界：无；
大纲：无；
颜色：#1B315E；
背景#b6b6；
填充：4px6px；
字体大小：16px；
文本对齐：居中；
}
.main标题{
文本对齐：居中；
颜色：#1B315E；
}
桌子{
宽度：100%；
字体大小：12px；
}
.表格名称{
颜色：#1B315E；
字体大小：14px；
字体大小：粗体；
}

欢迎—；峰会—；肯普赛基督复临安息日会学校
菜单
家庭工作区