链接附加标题本地存储

我有一个允许用户输入文本并使用提示符将其保存为标题名称的编辑器。

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

然后，我将不同的标题分配给称为“ titles”的键中

    //Asigning the titles input by the user to the key "titles"
    titles = localStorage.getItem("titles");

    if (titles == null){
        titles = [];
    }
    else {
        titles = JSON.parse(titles);
    }

    titles.push(title);
    localStorage.setItem("titles",JSON.stringify(titles));

最后，我为标题创建文本节点并将其附加到内容表中（只需一个简单的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;

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

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

核心价值

第一：你好世界

标题：[“ First”]

userEdits：Hello world

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

编辑：

JS

    <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);
    }

的HTML

    <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>