javascript - 链接附加标题本地存储

Question

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

    //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”，将存储在标题下的单词“First”将显示在内容 div 中。当他们点击“第一”一词时，编辑器将加载他们输入并保存在“第一”下的文本。

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

键:值

首先: Hello World

标题:[“第一”]

用户编辑: 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>

Answer 1

尝试以下代码:FIDDLE

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