Javascript 链接附加标题本地存储

我有一个编辑器，允许用户输入文本，并使用提示将其保存在标题名下

    //Get the title from the user
    var title = prompt("What would you like your title to be?");
    localStorage.setItem(title, editElem.innerHTML);

然后我将不同的标题分配到一个名为“titles”的键中

最后，我为标题创建文本节点，并将它们附加到一个内容表中（只是一个显示标题的简单div）

此外，他们输入到编辑器中的文本也将被保存

    var editElem = document.getElementById("editor1");
    var userVersion = editElem.innerHTML;
    localStorage.userEdits = userVersion;

现在，我尝试将显示的附加标题链接到它们各自的内容。 e、 g.如果他们在编辑器中键入“Hello world”并将其保存为“First”，则将存储在标题下的单词“First”将显示在内容分区中。当他们单击单词“First”时，编辑器将加载他们输入并保存在“First”下的文本

使用此示例，以下是存储在本地存储中的内容：

关键词：价值

第一：你好，世界

标题：[“第一”]

用户编辑：你好，世界

=================

编辑：

JS

var editElem=document.getElementById（“editor1”）；
$（文档）.ready（函数（）{
$（“#savebtn”）。单击（函数（）{
var title=prompt（“您希望您的标题是什么？”）；
setItem（title，editElem.value）；
titles=localStorage.getItem（“titles”）；
如果（标题==null）{
头衔=[]；
}否则{
titles=JSON.parse（titles）；
}
标题。推送（标题）；
setItem（“titles”，JSON.stringify（titles））；
document.getElementById（“更新”）.innerHTML=“编辑已保存！”；
var htmlData=”“+title+“
”；
$（“#可满足”）.append（htmlData）；
var userVersion=editElem.value；
setItem（“userEdits”，userVersion）；
editElem.value=“”；
});
});
函数showData（txt）{
editElem.value=localStorage.getItem（txt）；
}

HTML

内容
单击以保存所做的更改

尝试以下代码：

var editElem=document.getElementById（“editor1”）；
$（文档）.ready（函数（）{
$（“#savebtn”）。单击（函数（）{
var title=prompt（“您希望您的标题是什么？”）；
setItem（title，editElem.value）；
titles=localStorage.getItem（“titles”）；
如果（标题==null）{
头衔=[]；
}否则{
titles=JSON.parse（titles）；
}
标题。推送（标题）；
setItem（“titles”，JSON.stringify（titles））；
document.getElementById（“更新”）.innerHTML=“编辑已保存！”；
var htmlData=”“+title+“
”；
$（“#可满足”）.append（htmlData）；
var userVersion=editElem.value；
setItem（“userEdits”，userVersion）；
editElem.value=“”；
});
});
函数showData（txt）{
editElem.value=localStorage.getItem（txt）；
}

当我单击“保存更改”按钮时，它不起作用。我已经更新了我的代码并在html中添加了代码，以防你在那里发现错误；该按钮不起作用。当有文本框作为编辑器时，该按钮起作用。看看我的例子，试着做相应的修改。我希望我的提琴能像我一样为你工作。你的提琴能工作，但当我把它放在html文件中时就不行了。你需要根据你的div和组件对它进行更改

    //Add titles to content table
    document.getElementById("update").innerHTML = "Edits saved!";
    var theDiv = document.getElementById("Contentable");
    var content = document.createTextNode(title);
    theDiv.appendChild(content);
    var br = document.createElement("br");
    theDiv.appendChild(br); 

    var editElem = document.getElementById("editor1");
    var userVersion = editElem.innerHTML;
    localStorage.userEdits = userVersion;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    <!-- Function to save the user's input inside editor1 -->
    var editElem = document.getElementById("editor1");
    $(document).ready(function() {
      $("#savebtn").click(function() {
        var title = prompt("What would you like your title to be?");
        localStorage.setItem(title, editElem.value);
        titles = localStorage.getItem("titles");

        if (titles == null) {
          titles = [];
        } else {
          titles = JSON.parse(titles);
        }
        titles.push(title);
        localStorage.setItem("titles", JSON.stringify(titles));
        document.getElementById("update").innerHTML = "Edits saved!";
        var htmlData = "<a onclick=showData('" + title + "')>" + title + "</a><br>";
        $("#Contentable").append(htmlData);
        var userVersion = editElem.value;
        localStorage.setItem("userEdits", userVersion);
        editElem.value = "";
      });
    });

    function showData(txt) {
      editElem.value = localStorage.getItem(txt);
    }

    <div id="Contentable">
        <div id="contentheader">
        <h1><u><center>Content</center></u></h1>
        </div>
    </div>
    <div id="editor1" contenteditable="true" style="margin-left:30em">
    </div>
    <input id="savebtn" type="button" value="Save Changes"/>
    <div id="update">Click to save your changes made</div>

var editElem = document.getElementById("editor1");
$(document).ready(function() {
  $("#savebtn").click(function() {
    var title = prompt("What would you like your title to be?");
    localStorage.setItem(title, editElem.value);
    titles = localStorage.getItem("titles");

    if (titles == null) {
      titles = [];
    } else {
      titles = JSON.parse(titles);
    }
    titles.push(title);
    localStorage.setItem("titles", JSON.stringify(titles));
    document.getElementById("update").innerHTML = "Edits saved!";
    var htmlData = "<a onclick=showData('" + title + "')>" + title + "</a><br>";
    $("#Contentable").append(htmlData);
    var userVersion = editElem.value;
    localStorage.setItem("userEdits", userVersion);
    editElem.value = "";
  });
});

function showData(txt) {
  editElem.value = localStorage.getItem(txt);
}