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”下。

使用此示例，这是我本地存储中存储的内容：

关键：值

第一名：Hello world

标题： “第一”]

userEdits：Hello world

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

编辑：

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

链接附加标题本地存储

1 个答案: