javascript - localStorage로 저장할 수없는 컨텐츠 편집 가능

이 웹 사이트의 튜토리얼을 사용하여 기본 컨텐츠 편집 가능 섹션을 작성했습니다. HTML 5 콘텐츠 편집 가능

.toolbar 내에서 저장 버튼을 만들었습니다  상단에. 텍스트를 바꾸고 .saveContent 를 누르면  버튼을 누르면 콘텐츠가 localStorage에 저장되지 않으므로 새로 고침되면 사라지고 기본 텍스트로 돌아갑니다.

내가 만든 로그인 시스템으로 인해 페이지를 .php 페이지로 만들었습니다. 이것이 작동하지 않는 이유가 될 것입니다.

여기 코드 :

var theContent = $('#editable');
        $('.saveContent').on('click', function() {
            var editedContent = theContent.html();
            localStorage.newContent = editedContent;
        });
            
        if(localStorage.getItem('newContent')) {
            theContent.html(localStorage.getItem('newContent'));
        }

/* ~ 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; School Name</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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
    <?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" 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="editable" contenteditable="true">SCHOOL NAME</h3>
                    <table class="tableSet" id="editable" contenteditable="true">
                <caption class="tableName">Weekly Outline</caption>
                </table>
                </div>
        
            <div class="workspaceSide"></div>
        </div>
    </body>
</html>

도움을 주시면 감사하겠습니다.

감사합니다, 톰