链接附加标题本地存储

Question

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

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

我然后分配了不同的标题到一个名为“标题”

//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中。当他们点击单词“First”时，编辑器将加载他们输入并保存在“First”下的文本。

使用这个例子，这里是什么存储在我的本地存储中：

重点：值

第一：世界您好

标题： “第一次”]

userEdits：您好世界

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

编辑：

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