鏈接一個附加標題

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