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

链接附加标题

2 个答案: