鏈接附加標題本地存儲

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