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

Question

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

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

当我在.mainHeader代码序列中具有#edit的一个ID并在更改文本后去按.saveContent按钮时，我将刷新并将文本更新为更改后的文本。

但是，如果我在.tableName中具有#edit的ID，那么当我去更改文本，保存并刷新时，一旦保存，.tableName的文本就不会更新。

我将如何更新JavaScript代码以适应允许一次保存多个“内容可编辑”输入的情况。

我尝试使用＃edit1，＃edit2更改ID以使其唯一，从而使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;
    }

代码：

function saveEdits() {
            var editElem = document.getElementById("edit");
            
            var userVersion = editElem.innerHTML;
            
            localStorage.userEdits = userVersion;
        }
            
            function checkEdits() {

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

/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */

html > body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', sans-serif;
}

#wrapper {
    position: absolute;
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1B315E;
}

.backdrop {
    background-image: url(Assets/Images/backdrop.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.loginBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 420px;
    background: rgba(0,0,0,0.6);
    color: #FFF;
    padding: 40px 30px;
    box-sizing: border-box;
}

.loginBox p {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.loginBox input {
    width: 100%;
    margin-bottom: 20px;
}

.loginBox input[type="text"], input[type="password"] {
    border: none;
    outline: none;
    border-bottom: 1px solid #FFF;
    background: transparent;
    height: 40px;
    font-size: 14px;
    color: #FFF;
}

.loginBox input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    font-size: 16px;
    color: #FFF;
    background: #777;
    font-weight: bold;
}

.loginBox input[type="submit"]:hover {
    cursor: pointer;
    color: #FFF;
    background: #888;
}

 .institution, .message {
    font-size: 12px;
    text-align: justify;
}

* {
    box-sizing: border-box;
}

.navigation {
    background: #333;
    overflow: hidden;
    font-family: 'Trebuchet MS', sans-serif;
}

.navLinks {
    margin-top: 8px;
    margin-right: 4px;
    float: right;
    border: none;
    outline: none;
    color: #1B315E;
    background: #B6B6B6;
    padding: 4px 6px;
    font-size: 16px;
    text-align: center;
}

.navLinks:hover {
    background: #A5A5A5;
}

.menuDropDown {
    float: left;
    overflow: hidden;
}

.menuDropDown > .menuButton {
    border: none;
    outline: none;
    color: #FFF;
    background: inherit;
    font: inherit;
    margin: 0;
    font-size: 16px;
    padding: 12px 6px;
}

.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
    background: #999;
    color: #1B315E;
    outline: none;
    border: none;
}

.menuContent {
    display: none;
    width: 100%;
    background: none;
    position: absolute;
    z-index: 1;
    left: 0;
    overflow: auto;
    max-height: 85vh;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.menuDropDown:hover > .menuContent {
    display: block;
}

.menuColumn {
    float: left;
    width: 25%;
    padding: 8px;
    overflow-y: auto;
    background: #999;
    height: 235px;
}

.menuColumn > a {
    float: none;
    color: #1B315E;
    padding: 10px;
    font-size: 14px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.menuRow:after {
    content: "";
    display: table;
    clear: both;
}

.menuColumn > a:hover {
    background: #A5A5A5;
}

.menuColumn > a.current {
    background: #B6B6B6;
}

.menuHeader {
    color: #1B315E;
    margin-top: 0px;
    margin-bottom: 8px;
}

.workspaceMain {
    float: left;
    width: 72.5%;
    height: calc(100vh - 43px);
    position: relative;
    overflow: auto;
    padding-right: 2px;
    background: #FFF;
}

.toolbar {
    background: #777;
    border-bottom: 1px solid #666;
}

.toolbar > .saveContent {
    color: #1B315E;
    border: none;
    outline: none;
    background: #B6B6B6;
    padding: 6px 6px;
    font-size: 12px;
    font: inherit;
}

.saveContent, .saveContent:hover, .toolLinks:hover {
    background: #A5A5A5;
}

.toolLinks {
    margin-top: 2px;
    margin-right: 4px;
    float: right;
    border: none;
    outline: none;
    color: #1B315E;
    background: #B6B6B6;
    padding: 4px 6px;
    font-size: 16px;
    text-align: center;
}

.mainHeader {
    text-align: center;
    color: #1B315E;
}

table {
    width: 100%;
    font-size: 12px;
}

.tableName {
    color: #1B315E;
    font-size: 14px;
    font-weight: bold;
}

<!DOCTYPE HTML>
<!--
    ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
    <title>Welcome &#8212; Summit &#8212; Kempsey Adventist School</title>
    <link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
    <script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
    <link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    </head>
    <body onload="checkEdits()">
    <?php
    session_start();

    if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
        header("Location: index.php");
    }
    ?>
    <div id="wrapper">
        <div class="navigation">
            
            <button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
            <button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
            <button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
            
        <div class="menuDropDown">
            <button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
            <div class="menuContent">
            <div class="menuRow">
                
                <div class="menuColumn"> <!-- Home Workspace -->
                    <h5 class="menuHeader">Home Workspace</h5>
                    <a href="#" title="Welcome" class="current"><i class="fas fa-door-open"></i> Welcome</a>
                </div>
                
                <div class="menuColumn"> <!-- Learning Workspace -->
                </div>
                
                <div class="menuColumn"> <!-- Student Management Workspace -->
                </div>
                
                <div class="menuColumn"> <!-- Administration Workspace -->
                </div>
                
                </div>
            </div>
            </div>
        </div>
            <div class="workspaceMain">
                <div class="toolbar">
                <button class="saveContent" onclick="saveEdits()" title="Save Changes"><i class="fas fa-save"></i> Save</button>
                <button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
                <button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
                </div>
                
                    <h3 class="mainHeader" id="edit" contenteditable="true">KEMPSEY ADVENTIST SCHOOL</h3>
                    <table class="tableSet">
                <caption class="tableName" contenteditable="true">Weekly Outline</caption>
                </table>
                </div>
        
            <div class="workspaceSide"></div>
        </div>
    </body>
</html>