如何在刷新时保持附加数据？答案

【问题标题】：How to keep appended data on refresh?如何在刷新时保持附加数据？
【发布时间】：2016-12-11 07:39:04
【问题描述】：

我有一个 contenteditable div 作为编辑器，允许用户输入和保存文本。单击保存按钮后，我提示他们询问他们要将文本保存为什么。

然后将标题保存到 localstorage 并附加到单独的 div，在那里他们单击标题，保存它的文本将显示在编辑器中。

现在的问题是，每当我刷新页面时，附加的数据就会消失。想知道如何在刷新时将附加数据保留在那里？另外，我需要它仍然能够链接到它的内容，而不仅仅是变成 div 中的一堆文本。

我在这里简化了整个代码：

<!doctype html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">
</script>
</head>
<body>
<div style="width:10em; height:10em; border-style:solid; border-color:black;" id="editor1" contenteditable="true"></div>
<button id="savebtn">Save Changes</button>
<div style="width:10em; height:5em; border-style:solid; border-color:red;" id="Contentable"></div>
<script>
    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.innerHTML);
        titles = localStorage.getItem("titles");

        if (titles == null) {
          titles = [];
        } else {
          titles = JSON.parse(titles);
        }
        titles.push(title);
        localStorage.setItem("titles", JSON.stringify(titles));
        var htmlData = "<a onclick=showData('" + title + "')>" + title + "</a><br>";
        $("#Contentable").append(htmlData);
        var userVersion = editElem.innerHTML;
        localStorage.setItem("userEdits", userVersion);
        editElem.innerHTML = "";
      });
    });

    function showData(txt) {
      editElem.innerHTML = localStorage.getItem(txt);
    }
</script>
</body>
</html>

编辑：如何使用“删除”按钮从 div 中删除数据？如果 div 过于拥挤并且用户希望删除一些无用的标题。

【问题讨论】：

您是否尝试过在.ready() 处理程序中显示localStorage 的内容？

标签： javascript jquery html

【解决方案1】：

试试这个......我希望它有效

<!doctype html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">
</script>
<style type="text/css">
  .selected{
    background-color: blue;
    color:white;
  }
</style>
</head>
<body>
<div style="width:10em; height:10em; border-style:solid; border-color:black;" id="editor1" contenteditable="true"></div>
<button id="savebtn">Save Changes</button>
<button id="remove">Remove Data</button>
<div style="width:10em; height:5em; border-style:solid; border-color:red;" id="Contentable"></div>
<script>
    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.innerHTML);
        titles = localStorage.getItem("titles");

        if (titles == null) {
          titles = [];
        } else {
          titles = JSON.parse(titles);
        }
        titles.push(title);
        localStorage.setItem("titles", JSON.stringify(titles));
        var htmlData = "<a onclick=showData('" + title + "')>" + title + "</a><br>";
        $("#Contentable").append(htmlData);
        var userVersion = editElem.innerHTML;
        localStorage.setItem("userEdits", userVersion);
        editElem.innerHTML = "";
      });
    });

    function showData(txt) {
      editElem.innerHTML = localStorage.getItem(txt);
    }

    function loadData()
    { 

      var htmlData=localStorage.getItem("titles");
      htmlData=htmlData.replace(/\[|\]/g, "");

      htmlData=htmlData.replace(/["']/g, "")
      htmlData=htmlData.split(",");

      var arlength=htmlData.length;
      console.log(arlength)
      for(num=0;num<arlength;num++)
      {

        $("#Contentable").append("<a onclick=showData('" + htmlData[num] + "')>" + htmlData[num] + "</a><br>");

      }

    }
    loadData();
    var selected;
    $("#Contentable a").click(function(){
      selected=$("#Contentable a").index(this);
      $("#Contentable a").removeClass("selected")
      $(this).addClass("selected");
    })

    $("#remove").click(function(){
      $("#Contentable a:eq("+selected+")").remove();
      // Some Delete codes to localStorage here=================================
    })


</script>
</body>
</html>

【讨论】：

我应该在“一些代码”处添加什么？我应该在哪里添加这个？
正是我需要的！谢谢。
我有一个新问题；当我删除数据并重新加载页面时，它会重新出现。这意味着它不会永远被删除。
您也应该在本地存储中将其删除，请参阅此代码 var json = JSON.parse(localStorage["results"]); for (i=0;istackoverflow.com/questions/8127075/…
我了解它的作用，但我不完全确定如何在我的代码中实现它。我应该用什么替换“item-3”？