链接一个附加标题

Question

我目前有一个编辑器，允许用户保存他们的编辑，通过使用localstorage和一个提示，询问他们的编辑标题。我已将标题附加到可以访问它的表格。

简而言之，如果他们将编辑保存为“主题1”，则“主题1”将出现在网页侧面。现在我想知道，如何将这个“主题1”链接到他们的编辑？这样，当他们点击它时，编辑会显示他们的编辑并允许他们再次编辑它？

<!-- Function to save the user's input inside editor1 --> 
    function saveEdits() { 
     var editElem = document.getElementById("editor1"); 
     var userVersion = editElem.innerHTML; 
     localStorage.userEdits = userVersion; 
     var title = prompt("What would you like your title to be?"); 
     localStorage.title = title; 
     document.getElementById("update").innerHTML = "Edits saved!"; 
     var theDiv = document.getElementById("Contentable"); 
     var content = document.createTextNode(title); 
     theDiv.appendChild(content); 
    } 

<!-- Function to check if the user has any saved input --> 
    function checkEdits() { 
     if(localStorage.userEdits != null) 
     document.getElementById("editor1").innerHTML = localStorage.userEdits; 
    } 

Answer 1

为此，可以使用您的editor1元素上一个onclick功能进行

var editElem = document.getElementById("editor1"); 
editElem.innerHTML = localStorage.userEdits; 
editElem.onclick = function() { 
     /**Redirect them to the page where their edit is 
      If the edit is in the form of an html form 
      display it as follows**/ 
     document.getElementById("your form id").style.display="block"; 
}; 

Answer 2

你的代码是目前写入的方式，将有永远只能是一个保存的文档（localStorage.userEdits），等于是没办法将标题与文档链接起来。您需要更改存储结构。考虑类似如下：

<!-- Function to save the user's input inside editor1 --> 
function saveEdits() { 
    var editElem = document.getElementById("editor1"); 
    //get the title from user 
    var title = prompt("What would you like your title to be?"); 
    localStorage.setItem(title, editElem.innerHTML); //save the editor contents to local storage based on title 
    document.getElementById("update").innerHTML = "Edits saved!"; 
    //save the all titles in array so you know what documents exist 
    var titles = localStorage.getItem("titles"); 
    if(titles == null) //no titles saved 
     titles = new Array(); 
    if(titles.indexOf(title) < 0) //if the title is not already saved 
     titles.push(title); //add it to array 
    localStorage.setItem("titles", titles); //save the titles array to localStorage 
    ... 
} 

上面的代码将允许你在本地存储它们存储基于标题，然后存储标题的阵列到本地存储来保存多个文档。要加载的编辑对于给定的标题中使用以下：

<!-- Function to load user's input for given title --> 
function loadEdits(title) { 
    //load useredit for title from local storage 
    var userEdits = localStorage.getItem(title); 
    var editElem = document.getElementById("editor1"); 
    editElem.innerHTML = userEdits; 
}